9 replies

Handling loading and error states in T3

Hi I have just started using the T3 stack and was wondering what's the best practice for handling error loading states on the client, because I try in my frontend to do something like this.

const { data: jobs, isLoading } = api.job.getJobs.useQuery({
    searchQuery,
    take,
    skip,
  });

  if (isLoading) return <Spinner size="lg" />;

const { data: jobs, isLoading } = api.job.getJobs.useQuery({
    searchQuery,
    take,
    skip,
  });

  if (isLoading) return <Spinner size="lg" />;

const { data: jobs, isLoading } = api.job.getJobs.useQuery({
    searchQuery,
    take,
    skip,
  });

  if (isLoading) return <Spinner size="lg" />;

const { data: jobs, isLoading } = api.job.getJobs.useQuery({
    searchQuery,
    take,
    skip,
  });

  if (isLoading) return <Spinner size="lg" />;

When I do this it seems like my search input keeps re-rendering and losing focus after each keystroke. Is there something I'm missing and is this how I should be handling the state?

Handling loading and error states in T3

Similar Threads

Similar Threads

Similar Threads