What does the user see while data loads?

Every data screen owes the user a loading state, an error state with a way to retry, and an empty state. A blank screen is never the answer.

While the data is on its way

A fetch is never instant. The user stares at something during the gap, so it is on you to decide what. useQuery hands you isPending and isError; this is the isPending branch.

In my component [component] using TanStack Query, what should render while isPending is true, and how do I avoid layout shift when the real data arrives?

When the fetch fails

A dropped connection, a 500. isError covers it. Show a clear message and a retry that does not reload the whole page.

When isError is true in my TanStack Query component [component], what message should I show, and how do I wire a retry button to refetch so the user does not reload the page?

When there is nothing to show

Data arrived, but the array is empty. Not loading, not an error. Mix those up and the user thinks the screen is broken.

Show me one TanStack Query component in a Next.js App Router project that branches cleanly through loading, error, empty, and success, and point out how the empty branch differs from the loading branch.

A blank screen is never an answer. Loading, error, and empty are three separate states, and every data screen owes the user all three.

Additional Resources

Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.

TanStack Query Queries guide

Documentation

Query status (pending, error, success) and the isPending / isError booleans this lesson branches on.

https://tanstack.com/query/latest/docs/framework/react/guides/queries

SWR

Documentation

A leaner alternative to TanStack Query that exposes the same isLoading and error states for client-side fetches.

https://swr.vercel.app

Next.js: loading.js

Documentation

The route-level loading fallback for server-fetched data, which pairs with a client library's states for revalidation.

https://nextjs.org/docs/app/api-reference/file-conventions/loading

PreviousNext