Showing Loader only after a certain delay

1 Answer 148 Views
Badge 
Pieter
Top achievements
Rank 1
Iron
Iron
Pieter asked on 19 May 2021, 01:50 PM

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...

1 Answer, 1 is accepted

Sort by
0
Krissy
Telerik team
answered on 20 May 2021, 11:19 AM | edited on 20 May 2021, 11:19 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Badge 
Asked by
Pieter
Top achievements
Rank 1
Iron
Iron
Answers by
Krissy
Telerik team
Share this question
or