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.
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.