Build a Quick and Easy Loading Screen With React Hooks

In just 5 minutes

Bouncy, bouncy, bounce!

What Will I Get From This Tutorial?

Loading Screens are great for improving the UX and the look and feel of your site. Waiting until the DOM is completely rendered before displaying your page gives the user a seamless experience. Through this tutorial, you’ll learn to create a loading screen like the one on www.intentionalkreative.com.

Getting Started

Step 1: In your React App, create a loading component

Here I’ve created my own loading GIF animation. You can use anything you want:

Step 2: In App.js

What’s happening here?

• First, the LoadingScreen component is imported.
• Then theuseState hook returns a stateful value,loading, and a function to update it, setLoading. The initial state of the loading value is set to true.
• After the render is committed to the screen, the function that’s passed to the useEffect hook is executed. Passing the empty array, [], as a second argument lets React know that the effect isn’t dependent on any values from props or state. The setTimeout method executes thesetLoading function after 6000 milliseconds (six seconds) which sets the loading state to false.
• The inline if-else with a conditional operator works like condition ? true : false in the jsx.
• If loading is falsey, it will render your app.
• If truthy, it will load your LoadingScreen component.

That's It!

Have more questions? Let me know!