DEV Community

Rajeev Singh Naruka
Rajeev Singh Naruka

Posted on

How to create a preloader in ReactJS?

How can i implement a preloader in React? I initially thought of using the onLoad function around the component. What I am aiming for is: https://brittanychiang.com/ kind of preloader. It waits until all the content has been loaded. More over, if you switch tabs halfway the preloader animation is complete it, it continues only when you switch back to the tab. The complete preloader animation takes place always
no matter your connection speed. How can I implement it? Thanks.

Top comments (2)

Collapse
 
victormagarlamov profile image
Victor Magarlamov

You can do it easily with HOC. Create a function that will take the tab component as a parameter. If the data is not loaded, you show your preloader component, when the data is loaded - it shows your tab component.
For example - github.com/victor-magarlamov/maiof...

Collapse
 
toughyear profile image
Rajeev Singh Naruka

thanks for the reply, but I couldn't quite understand what you mean by tab component. Have a look at the site I mentioned brittanychiang.com, the splash screen/preloader on page first load is what I am talking about. Thanks for your time.