In this tutorial, I will be covering one of the easiest way to add preloaders in a react website.

Before starting of I am assuming that you already know about how to make a react project, if not then don't worry I've got you sorted ! Simply you can just go along this blog and learn about how can you built react apps and deploy them.
Getting Started With React And Deployment.

Still if you want to follow along I have covered the steps in the following screenshots.

• I have used "vite" in in order to create a react project

• Run this command "npm create vite@latest ." the period symbol "." means create a react project in the current folder

• 

  Give the package name of your choice , select framework as react (as we will be using it) and Variant as Javascript

• 

  After the setup has been done we need to install node modules that consists of libraries and stuffs we need in a react project so just go ahead (in the same folder - Preloader) and type "npm install" and afterwards to run the project type "npm run dev" (dev is a script command present in package.json). Just click on the localhost link to see your react project.

  

  • We know that adding preloaders can be hectic but I have got you an easy solution. We will be using this package named "react-spinners"

• Our approach will be to make use of two hooks i.e useState() to keep track of the loading state(or in easy language you can say "variables") and useEffect() this hook is used to execute the instructions in two scenarios -(first) when the page is loaded what should be done (second) when to run again , which is usually given in the dependency array.

• So without wasting any time let's jump into code and I will explain each and every line in code wherever required.

• Starting off with app.css and index.css(you can clean this file as it will produce unnecessary css problems)

• In app.css add the following code :

  

  • We have configured the width to take the entire screen size and the height to be 100 viewport height , display is made flex so that everything can be in a row and made the justify-content and align-items to be centered to center the content horizontally and vertically

• 

  First we imported the hooks that we are going to use(explained just above in short)

• We also imported the type of loader which we want to use. In this example I wanted to use GridLoader so I imported in the format

  • You can use any loader from this website just copy and paste the name of loader in the LOADERNAME place

  • import LOADERNAME from "react-spinners/LOADERNAME";

• In the App component -

  • We used useState() hook to make "state variable" - loading and the function
    -setLoading to update the state of the variable

  • Afterwards we used useEffect() hook to run a setTimeout function that makes the Loading state false after 4 seconds(our preloader will be displayed for 4 seconds itself).

  • The component which we are returning is based upon the "loading state"

    i.e till the loading state is true show the GridLoader or else show the "Hello World After Preloader"

  • In GridLoader

    • We specified the color i.e "blue"

    • We initialised its loading property to be "loading" state which is true when the webpage loads

    • We have intialised the size={50}(you can try on experimenting what suits your usecase)

    • And finally we set the aria-label and data-testid

    • Save the code and hit back at the url of your react project you will see the following output

• The blue GridLoader will animate till 4 seconds.

• After 4 seconds you will see the following page.

  

  So this marks the end of how we can add preloaders in a react website. This preloader will also work when deployed (you can deploy a react website with help of my previous blog)

  Here you will get detailed idea about how to create react projects and how to deploy them

• Resources

  • react-spinner package

  • You can find out different types of loaders on this page

Lastly, I want to say If you find this blog helpful please do like, share and subscribe as I will be bringing blogs on such useful topics...
If you still face any issue while implementing you can add your comment below and I will make sure to help you out!

Have a great day 😎!