Code In the Time of Corona

Needless to say, there are people suffering much more than I due to the COVID-19 Pandemic, but I think that it is definitely fair to say that isolation and boredom have taken their tolls on my attitude during this period of self-quarantine as I work on a project centered around currency conversion. I’ve found that the best way to maintain my spirits is to find little diversions during my day — unfortunately I started out by engaging in pastimes that were wholly unproductive such as Netflix, video games, cerveza, and other similar vices. It took me an embarrassing amount of time to realize this, but these things are not conducive to having a productive day! So I started to look for interesting little tasks for when I was in a rut with the work I was really supposed to be doing, and needed a way to regain momentum. I had lost too much time to fruitlessly trying to increase my Rocket League ranking.

Pictured: My opponent every game

In an effort to remain productive, I decided to look for little code-related things that I could implement in my project, that although not mission critical, would hopefully add something of value to my project. A few of the things that I added in were calendars for selecting dates with DatePicker, automated cron jobs through the Whenever Ruby Gem, and charts through the Victory JS chart library. The rest of this post will be centered around one other such thing that I’ve found to be useful, and beneficial to the overall appearance of the project — loading icons.

fig. 1 — The Aforementioned Loading Icon

Since I do not know how to my own animations, I started out by finding a library geared towards these loading icons. React-Loading is the library that I decided to use, and fortunately the documentation is very clear. There are really only three basic steps needed to display a loading icon on your page.

First, run the command:

npm install react-loading

Second, add the following import to the file in which the icon will be utilized:

import ReactLoading from 'react-loading'

Then finally, inside of the return statement of the component:

<ReactLoading type={{spin}} color{{'000'}} />

side note — the type and color of the loading icon can be customized. Check out the documentation to learn how.

What we have now is a component that displays a loading icon, but in this state, the icon would show up all of the time, whether or not the page was loaded. I decided to handle it in the following manner:

1. In the state of your component add a key called something like ‘loaded’, and give it a value of false or null.
2. In the componentDidMount function where the fetch that is causing the need for the loading icon is occurring, after the fetch, and inside the following .then() where the setState is called, set the loaded key equal to true.

The first two steps could look something like the above image

3. The final thing to do is conditionally render the loading icon. I suggest using a ternary operator to check if the loaded key within the state, and then display the icon of loaded is false and display the desired information if loaded is set to true. It could look something like this:

By putting these steps together I was able to at least show something on my page during a rather long fetch process. I have no doubt that there are many different ways in which loading icons can be incorporated into a project— send me a message if you’ve done it a different way!