Suspense + Await vs useQuery + isLoading

reacttypescript

Hi everyone!

I'm building a simple e-commerce app using TanStack Router, TanStack Query, and TanStack Start (with server functions).

To simulate a slow API during development, I'm adding a 10-second fake delay in my server function like this:

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

I'm currently using two different patterns for data fetching in different pages, and I want to know which one is more optimal — especially with slow APIs or fake delays.

Pattern 1 – Products page (Suspense + Await – feels very smooth):

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

→ With the 10s fake delay: the skeleton shows for exactly 10 seconds, then data appears smoothly. Love the clean code and great UX!
Pattern 2 – Orders page (useQuery + manual isLoading):

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

Should I standardize the whole app on Suspense + Await (like the Products page) for consistency? Or keep useQuery for pages that need more complex refetching/mutations?

TanStack•2mo ago•

1 reply

technological-jade

Suspense + Await vs useQuery + isLoading

reacttypescript

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

export const $getProducts = createServerFn({ method: "GET" }).handler(
  async () => {
    // Fake 10s delay to test loading states
    await new Promise((resolve) => setTimeout(resolve, 10000));

    const products = await db.query.product.findMany({
      with: { category: true },
      orderBy: [desc(schema.product.createdAt)],
    });

    return products;
  }
);

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

// In route definition
loader: ({ context: { queryClient } }) => ({
  productsPromise: queryClient.ensureQueryData(createProductsQueryOptions()),
}),

// In component
<Suspense fallback={<ProductListSkeleton />}>
  <Await promise={productsPromise}>
    {(products) => <ProductList products={products} />}
  </Await>
</Suspense>

→ With the 10s fake delay: the skeleton shows for exactly 10 seconds, then data appears smoothly. Love the clean code and great UX!
Pattern 2 – Orders page (useQuery + manual isLoading):

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

// In route definition
loader: ({ context: { queryClient } }) => {
  queryClient.prefetchQuery(createOrdersQueryOptions());
},

// In component
const { data: orders, isLoading } = useOrders();

if (isLoading) return <OrderListSkeleton />;
// Render orders...

Should I standardize the whole app on Suspense + Await (like the Products page) for consistency? Or keep useQuery for pages that need more complex refetching/mutations?

Suspense + Await vs useQuery + isLoading

Similar Threads

Suspense + Await vs useQuery + isLoading

Similar Threads

Similar Threads

Similar Threads