Whole-page skeletons

For route transitions, full page redirects, or dashboard initializations, you can snapshot entire layouts to serve full-page skeleton screens instantly.

// build step
import { snapshot } from 'use-skelly/build'

await snapshot('/dashboard', {
  out: '.skelly/dashboard.json'
})

// runtime — instant full-page skeleton on navigation
router.beforeEach(() => skellyPage('dashboard'))

Snapshot Lifecycle

1. Capture: Compile a route’s layout in the browser with measureLayout(), then hand it to snapshot() during your build pipeline to write the JSON array to disk. Called without a spec, snapshot() falls back to the built-in preset that matches the route.

2. Pre-render: Import the generated JSON file inside your root entry layouts (like Next.js loading.tsx) to display the full page skeleton instantly on navigations.