My Authors
Read all threads
I was reading react suspense's documentation about their research on how to design UX while fetching resources.

Here's a few important things I learnt -
Scenario 1:
The resource takes a long time to load (say - 1second)

Show a loading indicator.
Scenario 2:
The resource takes a very short time to load (say - 300ms)

Directly transition to the new screen. No loading indicator needed
Scenario 3:
The resource takes a medium time such as 500ms to load.

Then as per our previous scenarios this is what users will see -

Till 300ms -> current screen
Till 500ms -> loading indicator
After 500ms -> next screen
Scenario 3 contd:
The loading indicator flashes for 200 ms before transitioning to the new screen which makes the UI feel stuttering despite the fact it is actually fast
Scenario 3 Action:
In this scenario we have to extend the timing of loading indicator till 700ms even if the data is loaded at 500ms just to ensure that the users don't see a flashing loading indicator
Collectively -

Given the different kinds of network speeds there are three speeds in which a fetch will complete

1) short
2) medium
3) long
Here's the best part -

If we were to address all the three scenarios, we can have two loading indicators instead of one

1) first loading indicator is non intrusive like a simple opacity

2) second loading indicator is a full screen overlay that shows loading animations
New UX:

User clicks load -

1) 0-300 ms -> resource is loading but no feedback on the screen

2) 300-700 ms -> first loading indicator appears and it should be visible till 700ms

3) 700ms & beyond -> second loading indicator appears and persists till data is loaded
I feel this is the ideal way to display any loading indicator. React Suspense provides an excellent API to achieve it with concurrent rendering.

However it is still in experimental stage and is not available yet. Also, it only works with React.
Now I'll be spending the rest of my night thinking about how to achieve this in plain JavaScript and this is how my sleep cycle gets ruined
Missing some Tweet in this thread? You can try to force a refresh.

Enjoying this thread?

Keep Current with Dani Akash 🧪💥

Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!