Displaying loading spinner when uploading image by the user (using 'isLoading' state)

 import { useQuery } from '@tanstack/react-query';
import { getAllImages } from '../api/uploads';

export const useGetAllImages = (id: string) => {
  const {
    data: allImages,
    error: allImagesError,
    isPending: allImagesLoading,
  } = useQuery({
    queryKey: ['uploads', 'avatar', id],
    queryFn: () => getAllImages(id),
    enabled: !!id,
  });

  return { allImages, allImagesError, allImagesLoading };
};

const PhotoUploader = () => {
import { useGetAllImages } from '../../hooks/useGetAllImages';
import Loader from '../Loader';
// other imports
 
  const { allImages: allExistingImages, allImagesLoading } = useGetAllImages(userId as     string); // here
// other states

if(!allImagesLoading) {
  return <Loader />
}