nextcloud
Show online/offline state in UI
Current idea is to use the red indicator dot (error) of the save button to indicate offline status.
I'm not sure the checkmark with the dot is actually something easy to understand. It would be nice to align on this with @marcoambrosini
The whiteboard also introduced an indicator which ideally we get all apps use the same/similar design (cc @hweihwang @grnd-alt for the whiteboard)
Hi @mejo- I think we should use different approaches depending on whether this is for the desktop app or the web.
if we're talking about a desktop app, we shouldn't bug the user about whether they're online or not. Imo it's better not interrupt the user's work and try to handle all the possible scenarios gracefully ourselves. I've checked several other document editing apps and many of them do not even have a simple indicator.
E.g. we could
- Show red or amber dot if sync is not happening
- Prevent closing the window if un-synced and showing a warning dialog
- Store the changes locally and auto sync when the network is back, offer a way to handle conflicts when present
For the browser version, we could be a bit more loud about the fact that there's no network and show a permanent banner, which we already do!
For the indicator, I wouldn't show a checkmark, and instead replace the whole icon with a bigger dot
For the browser version, we could be a bit more loud about the fact that there's no network and show a permanent banner, which we already do!
The plan is to make editing possible while being offline in the browser version as well. That's why the current banner will go away once synchronizing the editing session to a local y-indexeddb provider in the browser is implemented.
We started working on handling offline state in the text app and went with the following indicators for now:
- Replace session list button with a cloud offline icon that has "Offline since 4 minutes ago" as tooltip.
- Show the red indicator dot in save button if we have unsaved changes and are currently offline
See the following screenshots:
| Online with unsaved changes | Offline with unsaved changes |
|---|---|