DEV Community 👩‍💻👨‍💻

Cover image for How To Create A Simple Loading Screen Using React
David Díaz
David Díaz

Posted on • Originally published at

How To Create A Simple Loading Screen Using React

A few days ago I made a post showing you how to create loading screens using Vue. Today, we are going to do the same, but using React!

As I said in the previous post, loading screens are always welcome, users don't want to stare at a blank screen while the page is loading.

The way I'm going to show you how to do it is very simple, but the first thing we need is a loading GIF or animation, this time I'm going to use the one that comes with Material-ui (It's really simple to install and to use, but if you need any help let me know)

Once we have it installed, we are ready to go. In my case, I have to fetch some data from an API using axios:

const [data, setData] = useState([])

useEffect(() => {
      .then((response) => {
            setData((data: any) => [,])
      .catch(function (error) {
  }, [])
Enter fullscreen mode Exit fullscreen mode

We get the idea right? We retrieve the data and assign it to a variable. But what if the data is huge? What if the internet connection of our user is not that fast? That's why we need the loading screen.

First, let's import the circular progress that we talked about before:

import CircularProgress from '@material-ui/core/CircularProgress'

Enter fullscreen mode Exit fullscreen mode

Then, on the return, before showing anything to our user, we need to check whether if our array with the data is loaded or not. One way of doing it would be checking if the length is greater than 0.

// App and App-header are classes that comes with "create-react-app"
  return (
    <div className="App">
    <header className="App-header">
       {data.length > 0 ?
             Show your data here!
         : <div>
             <p>Loading...</p> <CircularProgress /> 
Enter fullscreen mode Exit fullscreen mode

We would end up with something like this:

Example gif

Simple enough, right? And this works with any kind of data that you need to show, which is great. I used this method on my first React app, you can check it out.

Anyway, thanks for reading, hope you liked it!

See more at:

Check out my first React App:

Top comments (7)

philosofonusus profile image

You can simply use react suspense

dd8888 profile image
David Díaz Author

Didn't know about that one thanks! But it seems that it's still an experimental feature right?

blessdarah profile image
Bless Darah Gah

Not quite. Suspense is now stable. Helps you provide good fallback for your components when it takes long to render.
It's a good way to pass in a component skeleton.

braydentw profile image
Brayden W ⚡️

Nice, simple tutorial!

dd8888 profile image
David Díaz Author

Thank you!

quachhengtony profile image
Tony Quach

What is optionsNames? The response from the API call?

dd8888 profile image
David Díaz Author

Whoops, my bad, yes that's right. I fixed it now, sorry! 😅

🌚 Life is too short to browse without dark mode