Showing Loader only after a certain delay

[Pieter]

Hi,

 

I was wondering if it is possible (and how ;)) to only show a loader if (for example) an API call exceeds a certain amount of milliseconds. Something like this:

if (datanotyetready) {
   <Loader />
}
else {
  // Render a grid or something
}

I expect that I have to do something with an animation, but couldn't figure it out...

[Krissy]

Hi Pieter, 

Yes this can be achieved by conditionally rendering the Loader.

I've created an example which showcases how to show the Loader if one second has passed since a certain action (in this case a button click) and if a certain data array is empty. The Loader will disappear when the data array is filled in: 
https://stackblitz.com/edit/react-iil2qa-cgnvq4?file=app/main.jsx 

Hope that this example can give you an idea of how to achieve the desired case.

Regards, Author nickname Progress Telerik