Thread by @dani_akash_

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)

Action:
Show a loading indicator.

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

Action:
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