Here's a few important things I learnt -
The resource takes a long time to load (say - 1second)
Show a loading indicator.
The resource takes a very short time to load (say - 300ms)
Directly transition to the new screen. No loading indicator needed
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
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
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
Given the different kinds of network speeds there are three speeds in which a fetch will complete
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
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
However it is still in experimental stage and is not available yet. Also, it only works with React.