Server Offline Activity Indicator

[Anderas]

Use ActivityCenter to implement "server offline" and "no connection" activity indicators. See #4829 for further context.

Figma designs

[gileluard]

@niquewoodhouse is this design good enough for you?

Also should we keep the error message in the room view at the bottom of the screen or should we change it?

Another possible screen for changes:

[niquewoodhouse]

Does this remain visible for as long as the connection is off? Does it appear each time you try to do something that involves accessing the internet and then disappear?

In terms of design, would prefer to change icon + copy so its more concise and clearly about the internet.

• For example, using wifi.slash in symbols instead of the error icon.

• Updating copy to be "You're offline, check your Wi-Fi connection"

[gileluard]

As off now the nudge remains visible only for 1s. I just enhanced the ActivityCenter to display also error messages. The behaviour is similar to the one implemented for completion messages.

"You're offline, check your Wi-Fi connection" is quite long and Wi-Fi is not generic enough. What about "You're offline, check your connection"?

[niquewoodhouse]

"You're offline, check your Wi-Fi connection" is quite long and Wi-Fi is not generic enough. What about "You're offline, check your connection"?

Sounds good to me, thanks.

As off now the nudge remains visible only for 1s. I just enhanced the ActivityCenter to display also error messages. The behaviour is similar to the one implemented for completion messages.

When it does it appear? is it everyone you try to do something that involves a connection? 1s might be short but I trust we can get feedback on that later.

Not sure when this appears vs the indicator but maybe changing the copy is enough.

Title: You're offline
Body: You're offline, check your connection.

Also should we keep the error message in the room view at the bottom of the screen or should we change it?

Yes I think we should keep it. Not because I think its specifically good or anything, it's just what happens on the other platforms so consistency seems right when showing errors.

[gileluard]

@niquewoodhouse

As per our discussion earlier, we committed to change the copy for You're offline, keep the nudge all over the application while the application is not connected to the internet. Therefore we have a double notification in the room screen and decided to remove the bottom one in order to be consistent all over the application:

Here is how the application could behave if the device is offline:

[niquewoodhouse]

Thanks @gileluard

I think we should go ship this. It does mean iOS will be different to web and android, in the way it communicates if you're offline but I believe this is an improvement for the following reasons:

• Using same component for showing syncing activity, so user is familiar with these indicators for explaining status
• Persistent across the app, so users will be able to see a reason for actions not being completed (eg - changing avatar, inviting someone to room), not just visible when viewing a timeline.

cc @nadonomy (just letting you know about this tweak). @amshakal you may wish to amend this depending on what happens with IA

[nadonomy]

@niquewoodhouse @gileluard thanks for tagging!

@amshakal actually found a more elegant place for it in the bottom bar, but that's pending the next app layout changes, and might not apply to the room view too.

I like how this works. @niquewoodhouse there's a part of me that thinks it might look less messy if it's sat beneath the header rather than overlapping. I'm used that from apps like Twitter, 'jump to' interactions on chat apps, and interactions like pull to refresh. Wdyt?

[niquewoodhouse]

@amshakal actually found a more elegant place for it in the bottom bar, but that's pending the next app layout changes, and might not apply to the room view too.

@amshakal do you have a rough idea of when the next app layout changes might land, to help estimate if this worth fixing for now?

I like how this works. @niquewoodhouse there's a part of me that thinks it might look less messy if it's sat beneath the header rather than overlapping. I'm used that from apps like Twitter, 'jump to' interactions on chat apps, and interactions like pull to refresh. Wdyt?

I think if it's beneath you might miss it in practice but it could work well wdyt @nadonomy

[amshakal]

We have been debating having a bottom bar like this on home screen, thsi space would be used to add status messages but it won't be there on other screens so maybe it's not that scalable and what you have here is.

[niquewoodhouse]

Thank you @amshakal! @gileluard it sounds like the possible change might not happen so I think it would be good to go ahead with your PR, unless you feel otherwise.

The final requested design changes are:

• move the indicator down so it sits underneath the header
• use System as the background colour (reference link)

[gileluard]

@niquewoodhouse

move the indicator down so it sits underneath the header

We use the same userIndicator in the application. Moving it down will imply to move down all messages with the same look & feel. Is it ok for you?

[niquewoodhouse]

@niquewoodhouse

move the indicator down so it sits underneath the header

We use the same userIndicator in the application. Moving it down will imply to move down all messages with the same look & feel. Is it ok for you?

Yes, I think so thank you for asking and giving me the time to check.