feat(journeys): add skeleton and error boundary

This commit is contained in:
Usman Baig
2026-03-12 21:36:27 +01:00
parent e7e76bb3db
commit b3e335ec6c
2 changed files with 42 additions and 0 deletions

View File

@@ -0,0 +1,13 @@
'use client'
import ErrorDisplay from '@/components/ErrorDisplay'
export default function JourneysError({ reset }: { error: Error; reset: () => void }) {
return (
<ErrorDisplay
title="Journeys failed to load"
message="We couldn't load the journey data. This might be a temporary issue — try again."
onRetry={reset}
/>
)
}

View File

@@ -166,6 +166,35 @@ export function DashboardSkeleton() {
) )
} }
// ─── Journeys page skeleton ─────────────────────────────────
export function JourneysSkeleton() {
return (
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
{/* Header */}
<div className="mb-8 flex items-center justify-between">
<div>
<SkeletonLine className="h-8 w-32 mb-2" />
<SkeletonLine className="h-4 w-64" />
</div>
<SkeletonLine className="h-9 w-36 rounded-lg" />
</div>
{/* Controls */}
<div className="flex items-center gap-4 mb-6">
<SkeletonLine className="h-9 w-48 rounded-lg" />
<SkeletonLine className="h-9 w-48 rounded-lg" />
</div>
{/* Sankey area */}
<SkeletonCard className="h-[400px] mb-6" />
{/* Top paths table */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
<SkeletonLine className="h-6 w-24 mb-4" />
<TableSkeleton rows={5} cols={4} />
</div>
</div>
)
}
// ─── Uptime page skeleton ──────────────────────────────────── // ─── Uptime page skeleton ────────────────────────────────────
export function UptimeSkeleton() { export function UptimeSkeleton() {