feat(ticket): split overview/class detail queries and add loading skeletons

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

@@ -6,14 +6,25 @@ import { ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
 import { TicketDetailHeader } from './components/TicketDetailHeader';
-import { TicketDetailSkeleton } from './components/TicketDetailSkeleton';
+import {
+  TicketOverviewCardSkeleton,
+  TicketOverviewHeaderSkeleton,
+} from './components/TicketOverviewSkeleton';
+import {
+  TicketClassActionsSkeleton,
+  TicketClassContentSkeleton,
+} from './components/TicketClassDetailSkeleton';
 
 import { TicketHistoryCard } from './components/TicketHistoryCard';
 import { TicketOverviewCard } from './components/TicketOverviewCard';
 import { TicketRepairReportCard } from './components/TicketRepairReportCard';
 import { TicketStatusActions } from './components/TicketStatusActions';
+import { TicketDefectClassTabs } from './components/TicketDefectClassTabs';
 import { useTicketDetailEvents } from '../hooks/useTicketDetailEvents';
-import { useTicketDetailQuery } from '../hooks/useTicketQueries';
+import {
+  useTicketClassDetailQuery,
+  useTicketOverviewQuery,
+} from '../hooks/useTicketQueries';
 
 export default function TicketDetailPage() {
   const router = useRouter();
@@ -21,16 +32,17 @@ export default function TicketDetailPage() {
   const { ticketId } = useParams() as { ticketId: string };
   const defectClass = searchParams.get('defect_class') ?? undefined;
 
-  const ticketQuery = useTicketDetailQuery(ticketId, defectClass);
-  const ticket = ticketQuery.data;
+  const overviewQuery = useTicketOverviewQuery(ticketId);
+  const classDetailQuery = useTicketClassDetailQuery(ticketId, defectClass);
+  const overview = overviewQuery.data;
+  const classDetail = classDetailQuery.data;
+  const isClassDetailLoading = Boolean(
+    defectClass && classDetailQuery.isLoading,
+  );
 
   useTicketDetailEvents(ticketId, defectClass, Boolean(ticketId));
 
-  if (ticketQuery.isLoading) {
-    return <TicketDetailSkeleton />;
-  }
-
-  if (ticketQuery.isError || !ticket) {
+  if (overviewQuery.isError) {
     return (
       <div className="flex min-h-[60vh] flex-col items-center justify-center gap-3">
         <p className="text-sm text-destructive">Failed to load ticket.</p>
@@ -48,17 +60,34 @@ export default function TicketDetailPage() {
 
   return (
     <main className="relative z-10 space-y-5">
-      <TicketDetailHeader ticket={ticket} />
+      {overview ? (
+        <TicketDetailHeader ticket={overview} />
+      ) : (
+        <TicketOverviewHeaderSkeleton />
+      )}
 
       <div className="grid gap-5 xl:grid-cols-[minmax(0,7fr)_minmax(0,3fr)]">
         <div className="space-y-5">
-          <TicketOverviewCard ticket={ticket} />
-          <TicketRepairReportCard ticket={ticket} />
-          <TicketHistoryCard ticket={ticket} />
+          {overview ? (
+            <TicketOverviewCard ticket={overview} />
+          ) : (
+            <TicketOverviewCardSkeleton />
+          )}
+          {isClassDetailLoading ? <TicketClassContentSkeleton /> : null}
+          {!isClassDetailLoading && classDetail ? (
+            <>
+              <TicketRepairReportCard ticket={classDetail} />
+              <TicketHistoryCard ticket={classDetail} />
+            </>
+          ) : null}
         </div>
 
-        <div className="self-start">
-          <TicketStatusActions ticket={ticket} />
+        <div className="space-y-3 self-start">
+          <TicketDefectClassTabs ticketId={ticketId} />
+          {isClassDetailLoading ? <TicketClassActionsSkeleton /> : null}
+          {!isClassDetailLoading && classDetail ? (
+            <TicketStatusActions ticket={classDetail} />
+          ) : null}
         </div>
       </div>
     </main>