How to Display a Preloader
Showing a loading message to your users while fetching data.
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!!
The Application
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.
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.
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.
This is what the app looks like. We will be working in the HIGH SCORE and LEADER BOARD sections.
The Problem
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.
The Solution
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.
Let’s Hack
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.
1 - Add Spinner to HTML file
In the index.html file, we have the HTML tags for most of the things we display on the screen.
We’ll be working inside the record and inner-container elements.
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.
Inside the inner-container <div> we have another <div> with an id of scores-listthat holds our top five scores (line 45 below).
Here, we add the gif inside of a list item <li> tag and give it an id of 'loading-gif'.
2 - Add CSS for styling.
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.
3 - Connect ScoresAdapter To HTML
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.
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.
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.
Now, if we open our index.html file in the browser without running the back-end, we can see our preloaders.
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.
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!
