React: How to show Spinner & Component (at the same time) when State Changes using `useEffect`

Question

I am using conditional Rendering to show the spinner during first API call.
And when the date changes as seen in useEffect dependency array, it makes API call again

Question:

If the data fetch is not complete, the old data is shown in the screen.
But I want the spinner to show over the old data so that a user can sense that data loading is in progress .

The current implementation i.e conditional rendering only shows one component either the spinner or the Grid.

Spinner

Grid component

    import React, { Component, useState, useEffect } from "react";
    import { connect } from "react-redux";
    import ApiHelper from "../../api/ApiHelper";
    import ReactDataGrid from "react-data-grid";
    import { Toolbar, Data, Filters } from "react-data-grid-addons";
    import JarvisSpinner from "../presentationalComponents/JarvisSpinner";
    import { withRouter } from "react-router-dom";
    import "../../css/styles.css";
    import "../../css/JarvisGrid.css";

    const JarvisGrid = (props) => {
      const [pagesize, setPageSize] = useState(15);
      const [data, setdata] = useState([]);
      const [filters, setFilters] = useState({
        filterfield: "Application Send",
        filtervalue: "Base",
      });
      const [sort, setSort] = useState({
        Field: "PublicOrderNumber",
        Direction: "desc",
      });
      const [loading, setloading] = useState(true);

      useEffect(() => {
        //Set data
        ReloadData();
      }, [props.uid, props.CalendarDates.fromDate, props.CalendarDates.toDate]);


      // For Loading Data using API
      const ReloadData = () => {
        ApiHelper.GetGridQueryResult(
          props.uid,
          props.filterField,
          props.filterValue,
          props.CalendarDates.fromDate,
          props.CalendarDates.toDate
        )
          .then((response) => {
            setdata(response.data.responses);
            setloading(!loading);
          })
          .catch((error) => {
            setdata([]);
            switch (error.response.status) {
              case 403:
                console.log("Error code --> " + 403);
                props.history.push("/unAuthorizedPage");
                break;
              default:
                console.log("Error String --->" + error);
            }
          });
      };

      return (
        <>
          {loading ? (
            
          ) : (
            
               data[i]}
                rowsCount={data.length}
                minHeight={500}
                uid={props.uid}
                enableRowSelect={null}
                enableCellSelect
                toolbar={}
                onAddFilter={(filter) => {
                  setFilters({
                    filterfield: filter.column.key,
                    filtervalue: filter.filterTerm,
                  });
                }}
                onClearFilters={() =>
                  setFilters({
                    filterfield: "OrderType",
                    filtervalue: "Base",
                  })
                }
                onGridSort={(sortColumn, sortDirection) => {
                  setSort({ Field: sortColumn, Direction: sortDirection });
                }}
              />
            
          )}
        
      );


    };
    function mapStateToProps(state) {
      return {
        CalendarDates: state.calendarDates,
      };
    }

    export default withRouter(connect(mapStateToProps)(JarvisGrid));

Please note that am using redux for state management and react-router.

================================================= After Implementing the solution provided by MwamiTovi Now I have to figure out the overlaying stuff.

user_10849438 · Answer

This is actually fine, based on your logic here:

// Within your "return" statement
return (
   <>
      {loading ? ( 
           // renders if `loading === true`
        ) : (
          // renders if `loading === false`
          
        
        )
      )}
   
)

So this is what you actually want:

First time, load only the spinner during API call
Once data fetch (API call) is a success, show only the Grid component
Upon subsequent API calls, render both the spinner and Grid

Let's this:

// Initiate `data` as `null`
// After the first time, `data` will never be `null` again
const [data, setdata] = useState(null);

// Remember, !null === true since data === null,
// So first time API call, only spinner will show up,
// Upon the next calls, !data === false, so this won't load
if (!data) {
  return  ;
}

// Within your "return" statement
// After the first API, all the other API calls will do this...
return (
   {loading ? ( 
     <>
          // renders both spinner & component, `loading === true`
         // consider placing an "overlay" onto the component
          
        
     
    ) : (
          // renders only component, when `loading === false`
          
        
        )
    )}
)

user_8352929 · Answer

I would do this in your ReloadData function:

const ReloadData = () => {
    setLoading(true); // HERE

    ApiHelper.GetGridQueryResult(
      props.uid,
      props.filterField,
      props.filterValue,
      props.CalendarDates.fromDate,
      props.CalendarDates.toDate
    )
      .then((response) => {
        setdata(response.data.responses);
        setloading(false); // HERE
      })
      .catch((error) => {
        setdata([]);
        setloading(false); // HERE

        switch (error.response.status) {
          case 403:
            console.log("Error code --> " + 403);
            props.history.push("/unAuthorizedPage");
            break;
          default:
            console.log("Error String --->" + error);
        }
      });
  };

user_11873634 · Answer

https://www.npmjs.com/package/react-loading-overlay

Check this. I believe that this can solve your problem.


        Show your content here

React: How to show Spinner & Component (at the same time) when State Changes using `useEffect`

3 Answers