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.'
19 lines
561 B
TypeScript
19 lines
561 B
TypeScript
import type { Metadata } from "next";
|
|
import { LoadingFade } from "@/components/transitions/LoadingFade";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Loading — Route Commerce",
|
|
description: "Loading content from Route Commerce",
|
|
robots: {
|
|
index: false,
|
|
follow: false,
|
|
},
|
|
};
|
|
|
|
export default function Loading() {
|
|
// No skeleton. The previous page stays visible while the next one
|
|
// streams in, and the View Transition API crossfades them. This
|
|
// thin top bar is the only signal that navigation is in flight.
|
|
return <LoadingFade />;
|
|
}
|