Monday, July 12, 2021

handy timeout function to test for loading functionality?

During the development, we will add a loading indicator to the page to notify the user that data is loading.

however, the local environment might be able to test loading indicator since the speed is too fast.

the alternative way to do so is to add a small time out function to hold the execution of data loading function. then we can check the indicator will be shown or not.

const wait = (timeout: number) => new Promise((rs) => setTimeout(rs, timeout));

then we can use it in the data loading function 

 await wait(6000);

The data loading function will be paused for 6 second. That is enough for us to see the loading indicator spinning in the page.

I recommand to add this package to your project for loading indicator.

yarn add react-spinners

import MoonLoader from "react-spinners/MoonLoader";

add this to the render section

 <MoonLoader loading size={20} />






No comments:

Post a Comment