How to Display a Preloader
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 bulk of our work will take place in the
adapters directory. Particularly in the
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
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.
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.
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.
In our case, our score data is only available once the
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
index.html file, we have the HTML tags for most of the things we display on the screen.
We’ll be working inside the
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.
<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
2 - Add CSS for styling.
styles.css file, we have added some styling for our
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!