Woocommerce-ios: Order Note: UI hang when adding a customer note to an order

[astralbodies]

Describe the bug
When adding a customer note to an order there's a slight lag/hang in the UI.

To Reproduce
Steps to reproduce the behavior:

1. Go to an order.
2. Add a note to the order.
3. Select the switch to e-mail the customer with the note.
4. Add text to the text box.
5. Tap add.
6. Notice a hang.

Expected behavior
UI should dismiss immediately or provide some visual clue to something in process.

Mobile Environment
Please include:

• Device: iPhone X
• iOS version: 12.1.4
• WooCommerce iOS version: 1.2 beta

[ctarda]

@kyleaparker I would appreciate your input on this.

I have been playing with the idea of dismissing immediately after tapping "Add". That makes the process feel more fluid, but there is a short delay until the note appears in the Order Details screen (as the note needs to be created on the backend:

The delay would be more evident if the collection is slow, and even more prominent if there is an error (we would display a notice anyway in that case).

To me, it feels like it can be a bit confusing.

I see two possible solutions:

1. Do not dismiss the Note Editor screen immediately, and display a spinner until the note is created (if the process fails display a notice). In this case, how should I present the spinner? I haven't seen any spinner blocking the whole UI elsewhere in the app.
2. Dismiss immediately, as in the gif above, and create a "local and temporary note" to add to the list of notes, so there is no apparent delay. I don't even know if this second option is possible, but I wanted to request your input before going down the rabbit hole.

Thanks! 😊

[kyleaparker]

I think both these solutions could work but I prefer the idea of dismissing immediately. Could we show some skeleton data with the same loading animation we currently use across the app to indicate something is loading:

[astralbodies]

What do we imagine happening if the POST fails?

[ctarda]

I'd assume we'd present a Notice with a retry button. What do you think @kyleaparker ?

I'll look into showing that ghost data 😄

[kyleaparker]

I'd assume we'd present a Notice with a retry button. What do you think @kyleaparker ?

I was thinking the same thing 😄

[bummytime]

Thanks for looking into this @ctarda. Taking your 2 options individually...

1. Do not dismiss the Note Editor screen immediately, and display a spinner until the note is created (if the process fails display a notice). In this case, how should I present the spinner? I haven't seen any spinner blocking the whole UI elsewhere in the app.

The spinner would be new ground for this app, so if we elected to go this way, you have the freedom to implement it as you wish (as long as @kyleaparker approves it of course 😄 ).

1. Dismiss immediately, as in the gif above, and create a "local and temporary note" to add to the list of notes, so there is no apparent delay. I don't even know if this second option is possible, but I wanted to request your input before going down the rabbit hole.

This approach would be a lot trickier. As it stands today, the Storage fmwk is truly a "dumb" cache meant facilitate the loading of UIs more quickly and allow the user to see data if the device is offline. Introducing data that is a "pending server-side update" into the mix would require us to consider the potential ramifications to the overall framework. A great example here is when a user changes a filter on the Order List screen all of the stored Orders are dumped from storage and re-fetched — what would happen if there were pending updates in there?

Of course we could potentially skip storage and wait till the server-side push is completed before persisting it (and if you are already going down this path, just ignore me 😆 )