score:2

Accepted answer
// 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 <JarvisSpinner size="3x" /> ;
}

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

score:0

<LoadingOverlay
active={isLoading}
    spinner={Your own spinner}
    styles={{
    wrapper: {
       height: "100vh",
       overflow: "scroll"
    }
}}>
        <div>Show your content here</div>
</LoadingOverlay>

score:1

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);
        }
      });
  };

Related Query

More Query from same tag