Example of adding a spinner to a fetch on a react site

If you need to fetch data from a server while the user is viewing a webpage, you need to give the user an indication that the fetch is occurring and that the webpage is not frozen. Spinners are the perfect solution. You can show the user spinning circles, dots, bars, hearts and any other type of animation. Here is a simple example of adding a spinner to your fetch in a React app. For this example, I used the React and Redux template in Visual Studio to create a new React Project. I chose the option to place the solution and the project in the same folder and used .Net 3.1. After build, a node_modules folder is created under a ClientApp folder.

I open the Nuget Package Manager Console from the Tools menu and add two new node_modules.

npm install react-promise-tracker
npm install react-loader-spinner

These new node modules will be stored in a new folder node_modules stored under the root of the project. In the Components folder of ClientApp > src, I create my “Demo” functional component. This component shows a button that I can click to fetch some information from another website. A “result” div is added to show the result of the fetch, and the Spinner is added just below that.

 
import React from "react"
import { trackPromise } from 'react-promise-tracker';
import Spinner from './spinner/spinner'

const Demo = () => { 
   const  getList = async () => {        
        trackPromise(
            fetch('https://example.com?handler=myList')
                .then(response => response.json())
                .then((data) => {
                    document.getElementById("result").innerHTML = data.info;
                    console.log(data);
                })
        );
    }
    return (
      <div>
    <button type="submit" onClick={getList}>
                Test Demo
      </button>
            <div id="result"></div>
            <Spinner />
            </div>
);

}
export default  (Demo)

You will also need the spinner component. I created a “spinner” folder in components to hold both spinner.css and spinner.js.

 

.spinner {
    width: 100%;
    height: 100%;
}

    .spinner > div {
        display: flex;
        justify-content: left;
        align-items:flex-start;
    }

***********************************

 
import React from "react";
import { usePromiseTracker } from "react-promise-tracker";
import Loader from "react-loader-spinner";
import "./spinner.css";

const Spinner = (props) => {
    const { promiseInProgress } = usePromiseTracker();

    return (

        promiseInProgress && (
            <div className="spinner">
                <Loader type="BallTriangle" color="#ff0000" height="100" width="200" />
            </div>
        )
    );
};
export default Spinner;


Finally, I added a link in the NavMenu.tsx, the navigation menu and a route to it in App.tsx.

 
   <NavItem>
     <NavLink tag={Link} className="text-dark" to="/demo">Demo</NavLink>
       </NavItem>

***************************************

    
     <Route path='/demo' component={Demo} />

The spinner can be configured to show circles, bars, and many other spinner types. The documentation on the spinner is at:

https://npm.io/package/react-loader-spinner

Leave a Reply

Your email address will not be published. Required fields are marked *