feat: smooth view transitions, no skeleton flash
Deploy to route.crispygoat.com / deploy (push) Successful in 4m21s
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.'
This commit is contained in:
Tyler
@@ -1,40 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { LoadingFade } from "@/components/transitions/LoadingFade";
|
||||
|
||||
/** Subtle navigation indicator — see LoadingFade for rationale. */
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
<div className="mx-auto max-w-4xl px-6 py-20">
|
||||
{/* Hero skeleton */}
|
||||
<div className="mb-20 animate-pulse text-center">
|
||||
<div className="h-3 w-24 rounded bg-blue-100 mx-auto mb-5" />
|
||||
<div className="h-20 w-full max-w-xl mx-auto rounded-lg bg-blue-50 mb-5" />
|
||||
<div className="h-8 w-full max-w-2xl mx-auto rounded bg-blue-50" />
|
||||
</div>
|
||||
|
||||
{/* Content sections skeleton */}
|
||||
<div className="space-y-20">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="grid md:grid-cols-2 gap-12 items-center"
|
||||
>
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-4 w-20 rounded bg-blue-100" />
|
||||
<div className="h-8 w-3/4 rounded bg-stone-200" />
|
||||
<div className="h-4 w-full rounded bg-stone-100" />
|
||||
<div className="h-4 w-full rounded bg-stone-100" />
|
||||
<div className="h-4 w-2/3 rounded bg-stone-100" />
|
||||
</div>
|
||||
<div className="h-64 rounded-3xl bg-gradient-to-br from-blue-50 to-white border-2 border-blue-100" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <LoadingFade />;
|
||||
}
|
||||
|
||||
@@ -1,62 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { LoadingFade } from "@/components/transitions/LoadingFade";
|
||||
|
||||
/** Subtle navigation indicator — see LoadingFade for rationale. */
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
<div className="mx-auto max-w-4xl px-6 py-20">
|
||||
{/* Header skeleton */}
|
||||
<div className="mb-16 animate-pulse text-center">
|
||||
<div className="h-4 w-20 rounded bg-blue-100 mx-auto mb-5" />
|
||||
<div className="h-16 w-64 mx-auto rounded-lg bg-stone-200 mb-5" />
|
||||
<div className="h-5 w-96 max-w-full mx-auto rounded bg-stone-200" />
|
||||
</div>
|
||||
|
||||
{/* Contact cards skeleton */}
|
||||
<div className="grid gap-6 md:grid-cols-3 mb-16">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="rounded-3xl bg-white border-2 border-stone-200 p-8 shadow-xl text-center"
|
||||
>
|
||||
<div className="h-14 w-14 rounded-2xl bg-blue-100 mx-auto mb-5" />
|
||||
<div className="h-5 w-24 mx-auto rounded bg-stone-200 mb-3" />
|
||||
<div className="h-4 w-full max-w-[160px] mx-auto rounded bg-stone-100" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Form skeleton */}
|
||||
<div className="rounded-3xl bg-white border-2 border-stone-200 p-10 shadow-xl">
|
||||
<div className="animate-pulse space-y-6">
|
||||
<div className="h-6 w-32 rounded bg-stone-200" />
|
||||
<div className="h-8 w-48 rounded bg-stone-200" />
|
||||
<div className="grid gap-6 md:grid-cols-2 mt-8">
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 w-20 rounded bg-stone-100" />
|
||||
<div className="h-14 rounded-xl bg-stone-100" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 w-20 rounded bg-stone-100" />
|
||||
<div className="h-14 rounded-xl bg-stone-100" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 w-16 rounded bg-stone-100" />
|
||||
<div className="h-14 rounded-xl bg-stone-100" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 w-20 rounded bg-stone-100" />
|
||||
<div className="h-32 rounded-xl bg-stone-100" />
|
||||
</div>
|
||||
<div className="h-14 w-40 rounded-xl bg-blue-100 mt-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <LoadingFade />;
|
||||
}
|
||||
|
||||
@@ -1,41 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { LoadingFade } from "@/components/transitions/LoadingFade";
|
||||
|
||||
/** Subtle navigation indicator — see LoadingFade for rationale. */
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
<div className="mx-auto max-w-3xl px-6 py-20">
|
||||
{/* Header skeleton */}
|
||||
<div className="mb-14 text-center animate-pulse">
|
||||
<div className="h-4 w-16 rounded bg-blue-100 mx-auto mb-4" />
|
||||
<div className="h-16 w-48 mx-auto rounded-lg bg-stone-200 mb-5" />
|
||||
<div className="h-5 w-96 max-w-full mx-auto rounded bg-stone-200" />
|
||||
</div>
|
||||
|
||||
{/* Search skeleton */}
|
||||
<div className="mb-12">
|
||||
<div className="h-14 rounded-2xl bg-white border-2 border-stone-200 shadow-lg" />
|
||||
</div>
|
||||
|
||||
{/* FAQ items skeleton */}
|
||||
<div className="space-y-4">
|
||||
{[0, 1, 2, 3, 4].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
className="rounded-2xl bg-white border-2 border-stone-200 overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center justify-between px-6 py-5">
|
||||
<div className="h-5 w-3/4 rounded bg-stone-200" />
|
||||
<div className="h-8 w-8 rounded-full bg-blue-100" />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <LoadingFade />;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { SmoothViewTransition } from "@/components/transitions/SmoothViewTransition";
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://routecommerce.com";
|
||||
|
||||
@@ -94,7 +95,7 @@ export default function IndianRiverLayout({ children }: { children: React.ReactN
|
||||
<div className="min-h-screen relative">
|
||||
{/* Glass morphism gradient background */}
|
||||
<div className="fixed inset-0 bg-gradient-to-br from-blue-100/40 via-white/60 to-blue-50/30" />
|
||||
|
||||
|
||||
{/* Decorative glass orbs */}
|
||||
<div className="fixed inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-blue-200/30 to-transparent rounded-full blur-3xl" />
|
||||
@@ -102,8 +103,10 @@ export default function IndianRiverLayout({ children }: { children: React.ReactN
|
||||
<div className="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-br from-blue-50/40 to-transparent rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
{/* Content wrapper */}
|
||||
<div className="relative">{children}</div>
|
||||
{/* Content wrapper — crossfades on navigation. */}
|
||||
<div id="page-content" className="relative outline-none">
|
||||
<SmoothViewTransition>{children}</SmoothViewTransition>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,78 +1,7 @@
|
||||
"use client";
|
||||
import { LoadingFade } from "@/components/transitions/LoadingFade";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<main className="min-h-screen bg-white/50 backdrop-blur-xl">
|
||||
<div className="mx-auto max-w-6xl px-6 py-16">
|
||||
{/* Header skeleton with blue accent */}
|
||||
<div className="mb-16 animate-pulse">
|
||||
<div className="h-3 w-20 rounded bg-blue-100 mb-4" />
|
||||
<div className="h-16 w-80 rounded-lg bg-blue-50 mb-4" />
|
||||
<div className="h-6 w-96 max-w-full rounded bg-blue-50" />
|
||||
</div>
|
||||
|
||||
{/* Product cards skeleton */}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="rounded-3xl bg-white border-2 border-stone-200 overflow-hidden shadow-lg"
|
||||
>
|
||||
{/* Image skeleton */}
|
||||
<div className="h-48 bg-gradient-to-br from-blue-50 to-white relative overflow-hidden">
|
||||
<div className="absolute inset-0 -translate-x-full animate-[shimmer_1.5s_infinite] bg-gradient-to-r from-transparent via-blue-100/60 to-transparent" />
|
||||
</div>
|
||||
{/* Content skeleton */}
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="h-6 w-3/4 rounded bg-stone-200" />
|
||||
<div className="h-4 w-full rounded bg-stone-100" />
|
||||
<div className="h-4 w-2/3 rounded bg-stone-100" />
|
||||
<div className="pt-4 flex items-center justify-between">
|
||||
<div className="h-8 w-20 rounded-lg bg-blue-50" />
|
||||
<div className="h-11 w-28 rounded-xl bg-blue-100" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Stops section skeleton */}
|
||||
<div className="mt-20">
|
||||
<div className="animate-pulse mb-10">
|
||||
<div className="h-3 w-24 rounded bg-blue-100 mb-4" />
|
||||
<div className="h-10 w-64 rounded-lg bg-blue-50 mb-3" />
|
||||
<div className="h-4 w-48 rounded bg-blue-50" />
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{[0, 1, 2, 3, 4, 5].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.05 }}
|
||||
className="rounded-3xl bg-gradient-to-br from-blue-50 to-white border-2 border-blue-100 p-6"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<div className="h-6 w-32 rounded bg-stone-200 mb-2" />
|
||||
<div className="h-4 w-full rounded bg-stone-100" />
|
||||
</div>
|
||||
<div className="h-6 w-16 rounded-full bg-blue-100" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="h-4 w-28 rounded bg-stone-100" />
|
||||
<div className="h-4 w-20 rounded bg-stone-100" />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
/** Indian River Direct storefront loading — light blue glass backdrop
|
||||
* stays mounted in the layout. */
|
||||
export default function IndianRiverLoading() {
|
||||
return <LoadingFade />;
|
||||
}
|
||||
|
||||
@@ -1,70 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { LoadingFade } from "@/components/transitions/LoadingFade";
|
||||
|
||||
/** Subtle navigation indicator — see LoadingFade for rationale. */
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50/80 backdrop-blur-xl">
|
||||
<div className="mx-auto max-w-5xl px-6 py-20">
|
||||
{/* Back navigation skeleton */}
|
||||
<div className="mb-10 animate-pulse">
|
||||
<div className="h-5 w-32 rounded bg-stone-200" />
|
||||
</div>
|
||||
|
||||
{/* Stop header skeleton */}
|
||||
<div className="mb-12 animate-pulse rounded-3xl bg-white/60 border border-white/50 p-8">
|
||||
<div className="h-3 w-32 rounded bg-blue-100 mb-4" />
|
||||
<div className="h-16 w-80 rounded-lg bg-stone-200 mb-4" />
|
||||
<div className="h-5 w-full max-w-md rounded bg-stone-200 mb-4" />
|
||||
<div className="h-px w-12 bg-blue-100" />
|
||||
</div>
|
||||
|
||||
{/* Stop info skeleton */}
|
||||
<div className="mb-14 rounded-3xl bg-white/80 border border-white/50 p-8 shadow-xl">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="flex items-start gap-4 py-4 px-5 rounded-2xl bg-stone-50"
|
||||
>
|
||||
<div className="h-10 w-10 rounded-xl bg-blue-50" />
|
||||
<div className="flex-1">
|
||||
<div className="h-3 w-12 rounded bg-stone-200 mb-2" />
|
||||
<div className="h-5 w-24 rounded bg-stone-200" />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products section skeleton */}
|
||||
<div className="animate-pulse">
|
||||
<div className="h-4 w-20 rounded bg-blue-100 mb-4" />
|
||||
<div className="h-10 w-48 rounded bg-stone-200 mb-4" />
|
||||
<div className="h-4 w-64 rounded bg-stone-200 mb-10" />
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="rounded-3xl bg-white overflow-hidden shadow-lg"
|
||||
>
|
||||
<div className="h-48 bg-gradient-to-br from-blue-50 to-white" />
|
||||
<div className="p-6 space-y-3">
|
||||
<div className="h-6 w-3/4 rounded bg-stone-200" />
|
||||
<div className="h-4 w-full rounded bg-stone-100" />
|
||||
<div className="h-4 w-2/3 rounded bg-stone-100" />
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <LoadingFade />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user