Tyler
4ebbc6dacf
Deploy to route.crispygoat.com / deploy (push) Successful in 4m21s
User pain point: skeleton loading.tsx files made the app feel like a sequence of page reloads, exposing backend latency. Replaced with a single 1px shimmer bar + crossfade via React's <ViewTransition>. Changes: - Enable experimental.viewTransition in next.config.ts - Add SmoothViewTransition wrapper (ViewTransition name=page-content) - Add LoadingFade component: thin animated bar instead of skeleton - Add RouteAnnouncer for a11y (screen readers + focus reset) - Add ::view-transition-old/new CSS for the crossfade (220ms, no jarring slide, respects prefers-reduced-motion) - Wrap admin/tuxedo/IRD layout children in SmoothViewTransition (sidebar/header/footer stay mounted; only the body fades) - Replace 19 skeleton loading.tsx files with the fade component Result: navigation now feels like a single app, not a series of preload-and-render events. The user never sees a 'skeleton of the page they're about to load.'
15 lines
507 B
TypeScript
15 lines
507 B
TypeScript
import { LoadingFade } from "@/components/transitions/LoadingFade";
|
|
|
|
/**
|
|
* Admin shell loading state.
|
|
*
|
|
* Replaces the previous skeleton (header + 4 stat cards + 2 panels +
|
|
* 5-row table) with a 1px-thick animated bar at the top of the page.
|
|
* The AdminSidebar and parchment background stay mounted, so the
|
|
* transition is a subtle fade — the user never sees an "empty" version
|
|
* of the admin while the next page streams in.
|
|
*/
|
|
export default function AdminLoading() {
|
|
return <LoadingFade />;
|
|
}
|