feat(journeys): add skeleton and error boundary
This commit is contained in:
13
app/sites/[id]/journeys/error.tsx
Normal file
13
app/sites/[id]/journeys/error.tsx
Normal 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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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 ────────────────────────────────────
|
||||
|
||||
export function UptimeSkeleton() {
|
||||
|
||||
Reference in New Issue
Block a user