Improve errors when the app is offline

[rachelmcr]

Expected behavior

If the app is offline and can't sync/display the correct information on a screen, I expect to see a toast message or other error message explaining that.

In most cases, when an action fails while offline, we display this toast message:

There is no network available

Actual behavior

There are a couple screens where there is no error or the error is generic, not explaining the offline state:

• Plans: A toast message appears Unable to load plans
• Themes: When you first open the Themes section, the full list of themes does not appear and there is no error or other message to explain why
• Editor - Post Settings - Select categories: A blank screen appears (no categories load) and there is no error or other message to explain why
• Editor - Post Settings - Add a new category: A toast message appears Adding category failed with no explanation why
• Me - My Profile: It looks like the changes are saved (no error message), but if you exit the My Profile section and open it again the changes are gone.

Screenshots

Examples of clear toast/error messages:

Tested on Nexus 9, Android 6.0.1, WPAndroid alpha-17

[nbradbury]

Themes seems to handle no connection well, but the others all need to be addressed. I'm working on this now.

[rachelmcr]

During beta testing, some additional issues came up:

1. If you already have the Add Category dialog open, and then you lose your connection, the message "Adding category failed" still appears.
2. There was some expectation that the yellow "No connection" banner at the bottom of the main tabs would persist across all screens, as long as there was still no connection. (See full tester explanation here.) Is that something we might implement at some point, or is the plan to stick with toast messages throughout the app?

[maxme]

There was some expectation that the yellow "No connection" banner at the bottom of the main tabs would persist across all screens, as long as there was still no connection. (See full tester explanation here.) Is that something we might implement at some point, or is the plan to stick with toast messages throughout the app?

Actually, I'm not sure that the "No connection" banner is good UX, an app should work without connection and obviously fails when it needs to fetch or push data to the server. Also, the toast messages are not something that can be replaced by a banner: even if you have a connection, a network error could happen (slow connection for instance) and in that case the app should notify the user.

Imagine I'm on my phone and not connected to the network: I launch the app, I see the banner, go to the site picker, select my photo blog, tap the new post button, take a picture and save a post locally - that banner is only useful because I'll probably avoid to tap the "publish" button.

No banner: same flow, but I tap the "publish" button, I get a "Network not available" toast, look at my device status bar: "Oh yes, network down, sad panda, I'll try later".

Also having the banner everywhere in the app could be an issue because it could hide some part of the UI.

A better approach would be to notify the user something went wrong when they manually tried to fetch data from the server (like if they try to refresh the post list).

Conclusion: I would remove that banner completely from the app and make sure we notify the user everywhere a network error can happen when the network is down or unreachable. A designer point of view is welcome ;).

[rachelmcr]

That makes sense. In that case, only this issue persists for me:

If you already have the Add Category dialog open, and then you lose your connection, the message "Adding category failed" still appears.