santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ticket): add skeleton loading state for ticket detail page

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-24 00:22:34 +05:30
parent 81b68fdb61
commit c1c81687d8
2 changed files with 107 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/app/(modules)/ticket/[ticketId]/components/TicketDetailSkeleton.tsx Normal file
View File

@@ -0,0 +1,103 @@
'use client';
import { Skeleton } from '@/components/ui/skeleton';
function OverviewSkeletonField() {
return (
<div className="space-y-2">
<Skeleton className="h-3 w-24" />
<Skeleton className="h-4 w-32" />
</div>
);
}
function TimelineSkeletonItem({ isLast = false }: { isLast?: boolean }) {
return (
<div className="relative flex gap-4 pb-8 last:pb-0">
{!isLast ? (
<span
aria-hidden
className="absolute top-6 left-2.75 h-[calc(100%-10px)] w-px bg-border"
/>
) : null}
<Skeleton className="relative z-10 mt-0.5 size-6 shrink-0 rounded-full" />
<div className="min-w-0 flex-1 space-y-3">
<div className="flex flex-wrap items-center gap-3">
<Skeleton className="h-4 w-44" />
<Skeleton className="h-3 w-28" />
</div>
<Skeleton className="h-3 w-56" />
<Skeleton className="h-12 w-full" />
</div>
</div>
);
}
export function TicketDetailSkeleton() {
return (
<main className="relative z-10 space-y-5">
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="min-w-0 space-y-2">
<div className="flex flex-wrap items-center gap-2">
<Skeleton className="h-8 w-40" />
<Skeleton className="h-6 w-24 rounded-full" />
</div>
<Skeleton className="h-3 w-72 max-w-full" />
</div>
<div className="flex shrink-0 items-center gap-2">
<Skeleton className="h-10 w-36" />
<Skeleton className="h-8 w-28" />
</div>
</div>
<div className="grid gap-5 xl:grid-cols-[minmax(0,7fr)_minmax(0,3fr)]">
<div className="space-y-5">
<section className="overflow-hidden rounded-xl border bg-card">
<div className="border-b px-4 py-2.5">
<Skeleton className="h-4 w-20" />
</div>
<div className="grid grid-cols-2 gap-x-4 gap-y-6 p-4 md:grid-cols-4">
{Array.from({ length: 8 }).map((_, index) => (
<OverviewSkeletonField key={index} />
))}
</div>
</section>
<section className="space-y-5">
<div className="rounded-xl border bg-card p-5">
<Skeleton className="mb-4 h-5 w-40" />
<div className="space-y-3">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
<Skeleton className="h-4 w-2/3" />
</div>
</div>
<Skeleton className="aspect-video w-full rounded-xl border" />
</section>
<section className="rounded-xl border bg-card p-5">
<div className="mb-5 flex items-center gap-2">
<Skeleton className="size-5 rounded-full" />
<Skeleton className="h-5 w-56" />
</div>
<div className="pl-0.5">
<TimelineSkeletonItem />
<TimelineSkeletonItem />
<TimelineSkeletonItem isLast />
</div>
</section>
</div>
<aside className="self-start rounded-xl border bg-card p-5">
<Skeleton className="mb-4 h-5 w-36" />
<div className="space-y-3">
<Skeleton className="h-10 w-full" />
<Skeleton className="h-10 w-full" />
<Skeleton className="h-24 w-full" />
</div>
</aside>
</div>
</main>
);
}

11
src/app/(modules)/ticket/[ticketId]/page.tsx
View File

@@ -1,11 +1,12 @@
'use client';
import { useParams, useRouter } from 'next/navigation';
import { ArrowLeft, Loader2 } from 'lucide-react';
import { ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { TicketDetailHeader } from './components/TicketDetailHeader';
import { TicketDetailSkeleton } from './components/TicketDetailSkeleton';
import { TicketHistoryCard } from './components/TicketHistoryCard';
import { TicketOverviewCard } from './components/TicketOverviewCard';
@@ -27,11 +28,7 @@ export default function TicketDetailPage() {
);
if (ticketQuery.isLoading) {
return (
<div className="flex min-h-[60vh] items-center justify-center">
<Loader2 className="size-8 animate-spin text-primary" />
</div>
);
return <TicketDetailSkeleton />;
}
if (ticketQuery.isError || !ticket) {
@@ -61,7 +58,7 @@ export default function TicketDetailPage() {
<TicketHistoryCard ticket={ticket} />
</div>
<div>
<div className="self-start">
<TicketStatusActions ticket={ticket} liveState={liveState} />
</div>
</div>