Fetching messages gray status bar covers some part of clickable UI

[lukaszfryc]

Description

Type: Bug

Summary: When the gray status bar appears it covers buttons and makes some of them not clickable. Maybe we could improve how this status bar looks like and where it appears. Note, that the bar can be clickable in some cases like "Tap to reconnect" when you lost connection with your peers.

Expected behavior

The status bar does not cover clickable UI.

Actual behavior

The status bar prevents user from clicking "Add to contact" button or clicking on the first row in chat.

Reproduction

• Open Status
• Go offline (turn on Airplane mode) and online again

Additional Information

• Status version: 0.9.24
• Operating System: Android, iOS

[errorists]

I've posted a possible solution over here, wdyt? #4345

[lukaszfryc]

@errorists I like it a lot!

Here are more cases for you to think of:

1. Snackbar in wallet informing about temporary issues like:

2. Snackbar saying "Cannot sign message in offline mode" in the sign message screen:

Do you think that we can use the same pattern for these cases?

[errorists]

@lukaszfryc Absolutely, as long as you're offline or otherwise can't establish a connection we should display this notification. I'll prepare a design doc with guidelines on how it can be used against both the light and blue navigation bars and with longer strings like those.
Do we have a list somewhere with different types of connection states? I'd like to run it by @obi2020 to see if they can't be improved?

[lukaszfryc]

We have different states like "Connecting to peers", "Fetching messages", "Offline", etc. @mandrigin is there one place in the code where we can find those states?

[errorists]

Here's a solution I propose, whenever a snackbar is displayed we push down the underlying scroll view by the height of the snackbar like in this prototype
Think of it as adding / removing an additional top padding to the scroll children or offseting the scroll position by the height of the snackbar. Once the snackbar is gone, we push it up to the default location. When the 'Add to contacts' button is present, the snackbar should be rendered below it like so

[lukaszfryc]

Here's a solution I propose, whenever a snackbar is displayed we push down the underlying scroll view by the height of the snackbar like in this prototype

@errorists I like this idea. Also, changing colors of the snackbar when something is done (Connecting... -> Connected) is a nice UX 👍

[rachelhamlin]

@errorists @yenda I like the idea of pushing the rest of the view down to create room for the snack bar, but to my mind these blue versions with rounded edges look like buttons. They're static as well, right?

Changing back to grey might help.

[yenda]

@rachelhamlin the buttons are just for the visualization they are not part of the design afaiu

[rachelhamlin]

@yenda @errorists ahh I see, and I didn't click. 🙄 Cool, these look great.

[rachelhamlin]

@yenda @siphiuel we didn't talk about this one during the call. Is it quick enough that we could do alongside TtT?