Sometimes, when the request returns fast enough, loading may complete the state switching false -> true -> false in a short time. At this time, the loading animation may flicker (especially the animation that fills the entire screen), which will bring a bad user experience.

So the best way is to set a delay value. When the waiting time is greater than the delay value, loading will be set to true, as shown below.

Of course, there are no absolutes in the world. If we set loadingDelay to 400ms, my request is completed in 500ms still unavoidable at this time There will be flickering. So we need to introduce a new API loadingKeep


loadingKeep can keep loading for a specified time

If the request time is less than the specified time, the final time is the time of the display

If the requested time is greater than the specified time, the final time is the requested time

We can use loadingKeep to make an improvement on the example presented above.

  • If the request is completed within the specified time, the loading animation will not be displayed, and it will be displayed after the specified time
  • If the loading animation is shown, it must be shown at least long enough to not be flashed
Last Updated: 7/1/2022, 8:28:34 AM
Contributors: John