Implementing Global Loader with useIsFetching

Showcase how to implement a global loading indicator that appears whenever any data fetching is in progress using the useIsFetching hook.

import { useIsFetching } from '@tanstack/react-query';

Import the useIsFetching hook from React Query.

import React from 'react';

Import React to use JSX.

const GlobalLoader = () => {

Define a GlobalLoader component.

  const isFetching = useIsFetching();

Use the useIsFetching hook to determine if any query is currently fetching.

  if (!isFetching) return null;

If nothing is fetching, don't render anything.

  return (

Start returning JSX if there is a fetching operation.

    <div>Loading...</div>

Display a loading message.

);

End of return statement.

};

End of the GlobalLoader component definition.

export default GlobalLoader;

Export the GlobalLoader component for use in other parts of the application.