How to Display a Preloader

Showing a loading message to your users while fetching data.

Caleb
Caleb
Sep 20, 2020 · 6 min read
Image for post
Image for post
Photo by Christina Morillo from Pexels

Hello again, thank you for stopping by! In this article, we will go through one of a million ways to let your users know something is loading in the background. Today, we will be implementing this in an existing application. This is good for many different reasons but we won’t get into that now. Today, we hack!!

Our application is a browser-based 2D video game inspired by Galaga the classic arcade from the '80s. The front-end was built with Javascript, HTML5 Canvas, and CSS3. The back-end is a Rails API with a PostgreSQL database that serves JSON data. Here are the front-end and the back-end repositories if you want to look at all the code. We will not be going over each detail of this application today.

Image for post
Image for post

The bulk of our work will take place in the adapters directory. Particularly in the ScoreAdapter.js,index.html, and in the style.css files. Our adapters take care of connecting the front-end to the back-end. This is where all our data fetching occurs.

This is the GameAdaptercomponent. Very simple “POST” fetch request that creates our new games.

Image for post
Image for post

This is the ScoreAdapter component. Here we fetch the highest score as well as the top five scores. These functions are fairly simple, we use async and await (lines 9, 11, and 12 below) to give our functions the time they need to gather the data otherwise we would get some weird errors. Once we have the data from the response, we check that the score attribute of our data object is not undefined and then proceed to return the score(lines 13, 14, and 15). We do practically the same thing in both functions.

Image for post
Image for post

This is what the app looks like. We will be working in the HIGH SCORE and LEADER BOARD sections.

Image for post
Image for post
Shout-out to Anna for scoring over 11K points!!

Our back-end is hosted on a different server than that of our front-end. At times, this causes a bit of a delay in loading the score data in the front-end leaving our HIGH SCORE and LEADER BOARD empty.

Image for post
Image for post

Any time we are displaying data to the user that may take some time to load, it’s good practice and very common to let the user know something is happening. You can do this with a simple Loading…message or as we will be doing today, use a simple gif with a spinner.

Image for post
Image for post
This will be our spinner.

In our case, our score data is only available once the getTopScore() and getTopFive() methods are done. Currently, there is no way for our other components to know if the fetch is still working. For this particular reason, we will be making this component responsible for displaying and removing our spinner.

In the index.html file, we have the HTML tags for most of the things we display on the screen.

Image for post
Image for post

We’ll be working inside the record and inner-container elements.

Image for post
Image for post

We will be adding another <div> below the<h2> tag on line 26 above with an id of “loading” and place our gif image inside of it using an <img> tag and give it an id of “loading-gif”. The ids are important as that is what we will use to access these elements later on.

Image for post
Image for post

Inside the inner-container <div> we have another <div> with an id of scores-listthat holds our top five scores (line 45 below).

Image for post
Image for post

Here, we add the gif inside of a list item <li> tag and give it an id of 'loading-gif'.

Image for post
Image for post

In our styles.css file, we have added some styling for our loading and loading-li ids (line 130 below) as well as our scores id(line 44 above) making sure we add the display: none; attribute to ensure they are hidden.

Image for post
Image for post
Image for post
Image for post

Now, we can start working on making these elements accessible to our ScoresAdapter methods. We can do this by using the getElementByID() query with the ids we just created.

We want to add our queries inside of the ScoreAdapters constructor.

Image for post
Image for post

With this in place, we are able to access our elements and do what want with them when we need to. So following the order of operations in our component. When one of our functions is triggered the first thing we should do is display the loading gif until we have all our data in hand. Once we have the data we should remove our gif from the document and display the data.

Here is what that looks like in code.

Image for post
Image for post

Lines 11 and 12 are setting the display attribute of our score and loading elements to “block” which means they will be visible on the screen. Following that, we begin our fetching. Once that fetching is done we check if the score attribute of our data object is not undefined. If there is a score then we set the display attribute of our loading element back to ‘none’ so it is removed from the document and we return the score. We rinse and repeat for the other method.

Image for post
Image for post

Now, if we open our index.html file in the browser without running the back-end, we can see our preloaders.

Image for post
Image for post

In my case, I have this hosted on Heroku and have a free account so the back-end goes to sleep after 8–9 minutes of inactivity. If you are the first user in a 10 minute period you will see the spinners while the back-end wakes up.

Here is what you’d see in that scenario. I load the page then refresh the page a few times.

Image for post
Image for post

And that’s it. Yeah, we are really done! Now, our spinners only show if there is a delay with the data. There are other ways of keeping the back-end awake but this was much more fun. Don’t you agree? Let me know your thoughts in the comments. You can check out the live app at https://staticshooter.herokuapp.com. Stay healthy, stay curious!

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Caleb

Written by

Caleb

Full-Stack web developer having fun with Rails, JavaScript, HTML, CSS, React, Redux, Bootstrap, Material-UI, and quarantine gardening.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Caleb

Written by

Caleb

Full-Stack web developer having fun with Rails, JavaScript, HTML, CSS, React, Redux, Bootstrap, Material-UI, and quarantine gardening.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store