Spin Like A Rockstar

Nowadays spinners are one of the most important parts of your web application, most of the asynchronous activities need to be indicated to the user in some way and the most common way to do it is with a spinner, a gif, that you display and hide when such activities finish their work.

Photo by Mike van den Bos on Unsplash

In this article, I am going to show you how I wrote my spinners, How I am integrating them with my React-based web application in a way that they work as a standalone mechanism, Shall we?

The Motivation

When we talk about asynchronous activities, the first thing that came up is APIs that we execute within our web application, In such a case, we want to show a nice loader to the user so he will be aware that we are retrieving the requested information, Now, The question is how you do it? feel free to add it in your comments and meanwhile, I will explain how I am doing it.

XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. XMLHttpRequest is used heavily in AJAX programming. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

The idea is to intercept all the XHR Requests in the web application and trigger the loader but in such a way that we will not trigger the loader multiple times, We will know if the loader already working or not to handle it.

There are two approaches and it depends on the design of your web application, for example, If you designed your web application to execute the APIs from a single place or If you have an existing application and you want to integrate the generic mechanism with XHR interception.

Basics

Let’s take a look at the following code, This is how I manage the main layout in my application, I define all the global components in the root component so they will reside to other business components.

Want to read about the visit here: https://medium.com/swlh/choose-your-battles-i-say-choose-your-error-codes-ca079355f574

We want that the Spinner will be in our root component, It will behave as React Container with few props mapped to it, In this way, we can dispatch Actions from any place in the application to change the Spinner state, for example, showSpinner, hideSpinner, etc.

By design, We want to intercept all the requests and the next thing would be to define the configuration for him, The configuration will contain the list of the APIs that we want to ignore (It can be a request that we don’t need the user interaction, background activity) because not all the time we want to show the spinner.

Spinner State

Every time that there is an XHR request, we will maintain a counter for the spinner in our Redux store, We will define the pendingTasks list in the store and with this list, we will manage the spinner visibility.

The spinner will be managed by two actions, XHR_TASK_BEGIN and XHR_TASK_END, those actions will be dispatched from the XHR Interceptor, let’s take a look.

The Triggers

Notice the ignoreList here, you can define what APIs you want to ignore with regex.

Here is where those methods are being called

Before we call the API, We will invoke the startSpinner and once the request ends we will invoke the endSpinner function.

An image is worth 1000 words so how much video worth? Let’s debug it.

In the video see how the pendingTasks change, The spinner will be shown when the value is greater than zero, Let’s see how the list of the pendingTasks being modified.

For those who already have an existing web application and want to integrate the same approach without any relation to the React-Redux-based web application, you can always ( as I said at the beginning ) intercept the requests using the XHR.

With the same approach I used in my React-Redux web application you can leverage the XHR events to mimic the redux store modifications with global variable, In general, you count the active XHR in the network, and in that way, you make sure the spinner will be handled automatically.

Wrapping Up

This article should give you a different point of view on how to integrate simple but crucial features such as spinner and how to utilise them for providing the best architecture to your app.

Who am I?

I am Ofir Attia, a Web developer, focusing on design and architecture. Currently working at Amdocs as Software Architect.

Contributing

Special thanks to my co-worker Refael Oknin, Refael and I develop open-source libraries together for the past 2 years.

the Global Spinner feature comes as part of the harmony-boilerplate that we developed.

Want to know more about Harmony? read the following article.