optimistic-gold

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

Hii folks! 👋 I'm newbie in TanStack Query and I would have a question related to displaying the loader spinner on PhotoUploader component during the process of uploading a certain photo that the user chooses. Namely, I encountered a problem displaying my Loader component when uploading images. When the user selects the input field 'Choose files' and then a specific photo, at that moment I should show my loading spinner and of course hide it when the image is displayed on the screen.

The thing is also that I use a certain hook 'useGetAllImages' where there is an 'allImagesLoading' state which is initially 'false' if I understood correctly.

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

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

I also call this hook on the page where I want to display the spinner and I tried to call it on the page in the way that I added to my state

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

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

and then above return if i do this i can display it:

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

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

but I want this state to be 'false' when fetching the user selected photo, right? If someone could give me some guidance or similar, I would be very grateful :reactcharts: 🔥

8 Replies

unwilling-turquoise•9mo ago

isPending will be equal to true when the status of a query is pending

status: QueryStatus

Will be: pending if there's no cached data and no query attempt was finished yet. error if the query attempt resulted in an error. The corresponding error property has the error received from the attempted fetch success if the query has received a response with no errors and is ready to display its data. The corresponding data property on the query is the data received from the successful fetch or if the query's enabled property is set to false and has not been fetched yet data is the first initialData supplied to the query on initialization.

unwilling-turquoise•9mo ago

https://tanstack.com/query/latest/docs/framework/react/reference/useQuery

useQuery | TanStack Query React Docs

tsx const { data, dataUpdatedAt, error, errorUpdatedAt, failureCount, failureReason, fetchStatus, isError, isFetched, isFetchedAfterMount, isFetching, isInitialLoading, isLoading, isLoadingError, isPa...

unwilling-turquoise•9mo ago

So allImagesLoading will be true initially

optimistic-goldOP•9mo ago

I managed to display the spinner with every refetch of the entire page, but I specifically need it when uploading an image. I was thinking of using this existing hook and its 'isUploadingPhotos' prop, do you think that's ok?

optimistic-goldOP•9mo ago

if I call this prop on the Upload page

const { 
onUploadPhotos, isUploadingPhotos 
} = useUploadPhotos(userId as string);

console.log(isUploadingPhotos);
...

{isUploadingPhotos && <Loader />}

const { 
onUploadPhotos, isUploadingPhotos 
} = useUploadPhotos(userId as string);

console.log(isUploadingPhotos);
...

{isUploadingPhotos && <Loader />}

I always getting 'false' as value in the log. and it should become 'true' when the image is uploaded, right?

unwilling-turquoise•9mo ago

Yeah I think you want the loading spinner to track the state of the mutation

optimistic-goldOP•9mo ago

yes any idea how i could solve it?

unwilling-turquoise•9mo ago

Would you be able to post a codesandbox or stackblitz of an example of your issue?

Gaming

Programming

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

Did you find this page helpful?