Creating a Super Simple Loading Page on React

With the help of a wonderful volunteer from the Black Codher Bootcamp, I set out to create my own super simple loading page that’s hopefully less complex and easier for other coding newbies like myself to understand.

Here’s how:

1) Creating the Loading Page component as set below.

Edits you may want to make here:

• The ‘4000’ on the setTimeout function: This means my loading page will display for 4 seconds. Feel free to make yours longer or shorter.
• Everything inside the return statement: My loading page uses a Spinner imported from Bootstrap and a h1 tag. You can inset anything you’d like the loading page to display inside this return statement and animate it in your CSS if preferred. Mine spins!
• Where your loading page is re-directing to: My loading page redirect’s to “/home” — change yours as fit.

const Loading = () => {
  const [redirect, setRedirect] = useState(false);

  console.log(redirect);

  useEffect(() => {
    setTimeout(() => setRedirect(true), 4000);
    console.log(redirect);
  }, [redirect]);

  return (
     <div className="loadingP">
     <Spinner
       className="cirlce"
       animation="grow"
       variant="primary"
       role="status"
    >
     </Spinner>
     <h1 className="glow">Loading.....</h1>
    {redirect && <Redirect to="/home" />}
  </div>
  );
};
export default Loading;

2) Adding the Loading component and path to your App.js

If your project doesn’t use router that is fine, if it does, don’t forget to add the relevant import statement to the top of you App.js file

import { BrowserRouter as Router, Route } from "react-router-dom";
<Route
  exact
  path="/loading"
  render={() => (
<>
   <Loading />
</>
)}
/>

3) Import ‘Link’ so we can render the Loading page!

Go to the place in your code where the loading page will be triggered.

For example, in my project after someone clicks a submit button on a form (lets call this Form.js), this is when the loading page will be displayed.

On your version of Form.js

import { Link } from "react-router-dom";

I then wrapped the link around the submit button, to that when clicked, it goes to the /loading path.

<Link to="/loading">
  <Button
    type="submit"
    value="submit"
    label="Submit"
/>
</Link>

And done! This is how I created a simple loading page.