add-skeleton-loaders

To prevent layout shift in TanStack Start, wrap independently fetched regions in `<Suspense>` boundaries with shadcn `<Skeleton />` fallbacks that match the shape and dimensions of your real UI components.

A blank gap appears when your React Suspense fallback lacks a skeleton placeholder matching the loaded layout. You need to add shadcn `<Skeleton />` blocks mirroring the expected content shape and count for each fetch region.

To prevent fast sections from waiting on slow ones, wrap each independent `useSuspenseQuery` fetch in its own `<Suspense>` boundary or `isPending` branch rather than relying on a single router-wide pending component.

Avoid using `defaultPendingComponent` when a route has multiple independent fetch regions with varying load times, as it forces all sections to wait for the slowest query instead of rendering individual skeleton placeholders inline.

The best way to match skeleton UI placeholders to real content is using shadcn `~/components/ui/skeleton` blocks, ensuring the skeleton shape, count, and approximate dimensions directly mirror the eventual loaded data components.

Yes, this approach works with `useQuery` by replacing blank `isPending` branches with correctly shaped shadcn `<Skeleton />` placeholders, ensuring users see layout-matching loading states instead of spinners or gaps during async data fetching.