No funded issue found.
Check out the Issue Explorer
Be the OSS Funding you wish to see in the world.
Looking to fund some work? You can submit a new Funded Issue here .
Time left
Opened
Issue Type
Workers Auto Approve
Project Type
Time Commitment
Experience Level
Permissions
Accepted
Reserved For
Improve 'snackbar' animation behavior
status-im
Clojure, reactnative
# Problem
We use a 'snackbar' (i.e. notification bar) to indicate the client's connectivity status. On spotty networks the snackbar changes states every few milliseconds and makes the app appear glitchy (i.e. bar is visually perceived as 'flicker').
The bar has the following states:
- Connecting
- Offline
- Connected
The snackbar is used in combination with the blue 'nightrider' when connected that indicates 'fetching messages'. When the green connection bar appears, it is sometimes shown at the same time as the fetching messages bar.
Click each button in this prototype to view the behavior: https://framer.cloud/MsLgV/
## Implementation
The best solution to remove the glitchy appearance is still to be specified, but it [mostly has to do with](https://github.com/status-im/status-react/issues/9288#issuecomment-557576337):
• adding delays when we consider a change of state permanent,
• being more lax and forgiving
• smoothing the animation so it doesn't drop frames,
• forcing the state to be persistent for at least ~1000ms so it doesn't blink,
• only saying that you're Online after being Offline for a prolonged period, not every time we wake the app.
#### Other ideas
- Seperate the logic of when the client is considered 'connected' from the immediate display of the snackbar. E.g. if the connection remains for ca. 1000ms show snackbar
- Introduce an 'Unstable network' state or stay offline if connection is lost more than x times within a given period.
- Introduce dependency between blue nightrider and snackbar to ensure they do not appear at the same time.
- We may want to change the definition of connectivity.
## Acceptance Criteria
The basic requirement of this issue is UI smoothing.
When on a spotty network, the snackbar showing connectivity status shouldn't change as frequently as it does now, but still inform users of whether or not they are able to send and receive messages.
Please force an uninterrupted display of a state for 1000ms.
Snackbar and nightrider never appear at the same time. Snackbar takes precedence over nightrider. User will only see the nightrider if definitively _online_ and collecting messages.
Please also prevent the snackbar from displaying each time the user wakes the app from background. It's gratuitous, unless the app is having trouble connecting and remains _offline_ for some reasonable amount of time.
## Notes
Feel free to propose additional solutions, we're not sure on the best approach here.
## Future Steps
Test on spotty network
Consider reintroducing the snackbar to the Wallet depending on latest loading state indicators (https://github.com/status-im/status-react/issues/8443#issuecomment-539045418)
Setup your profile
Tell us a little about you:
Skills
No results found for [[search]] .
Type to search skills..
Bio Required
[[totalcharacter]] / 240
Are you currently looking for work?
[[ option.string ]]
Next
Setup your profile
Our tools are based on the principles of earn (💰), learn (📖), and meet (💬).
Select the ones you are interested in. You can change it later in your settings.
I'm also an organization manager looking for a great community.
Back
Next
Save
Enable your organization profile
Gitcoin products can help grow community around your brand. Create your tribe, events, and incentivize your community with bounties. Announce new and upcoming events using townsquare. Find top-quality hackers and fund them to work with you on a grant.
These are the organizations you own. If you don't see your organization here please be sure that information is public on your GitHub profile. Gitcoin will sync this information for you.
Select the products you are interested in:
Out of the box you will receive Tribes Lite for your organization. Please provide us with a contact email:
Email
Back
Save
