Skeletons

A skeleton is a grey placeholder in the shape of the page. The engine shows one while a route's loader fetches data, so the screen does not freeze after a click. You rarely render one yourself: you choose which one a route shows.

ExampleCopy Anchor Link

import { createFileRoute } from '@tanstack/react-router';
import { CartSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';

export const Route = createFileRoute('/{-$locale}/cart')({
  pendingComponent: () => <CartSkeleton />,
});

Built-in skeletonsCopy Anchor Link

All come from @salla.sa/twilight-theme-engine/skeleton.

PageSkeleton takes optional children. When you pass children, it renders them instead of the default layout, so you can keep the same entry point and supply your own shape.

When a skeleton appearsCopy Anchor Link

The router decides, not the skeleton. Two timings apply, and the engine sets them for you:

Change them, or the default skeleton, in the createRouter call inside getRouter() in app/router.tsx:

import { createRouter } from '@salla.sa/twilight-theme-engine/tanstack';
import { PageSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';

// inside getRouter()
const router = createRouter(routeTree, {
  defaultPendingComponent: () => <PageSkeleton />,
  defaultPendingMs: 150,
  defaultPendingMinMs: 200,
});

GotchasCopy Anchor Link

• A skeleton shows only if the loader takes longer than defaultPendingMs. A cached or quick page goes straight to its content.
• A route's own pendingComponent wins over the default one.
• Make a skeleton close to the real layout's height. A very different size makes the page jump when the content arrives.

NextCopy Anchor Link

• Routes and pages covers pendingComponent in a route.
• Performance