fix: refresh ticket detail data with the active defect class, select the emitted defect class after analysis completes, and animate the processing loader icon.

src/app/(modules)/ticket/[ticketId]/components/actions/ProcessingTicketAction.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { AlertCircle, Loader2 } from 'lucide-react';
+import { AlertCircle, Loader  } from 'lucide-react';
 
 import { Progress } from '@/components/ui/progress';
 import type { TicketProcessingProgress } from '../../../hooks/useTicketDetailEvents';
@@ -28,7 +28,11 @@ export function ProcessingTicketAction({
   const hasProgress = Boolean(progress);
 
   return (
-    <TicketActionCard icon={Loader2} title="Analyzing Video">
+    <TicketActionCard
+      icon={Loader}
+      iconClassName="animate-spin"
+      title="Analyzing Video"
+    >
       <div className="space-y-4">
         <div className="space-y-2">
           <div className="flex items-center justify-between gap-3 text-sm">

src/app/(modules)/ticket/[ticketId]/components/actions/TicketActionCard.tsx

@@ -3,15 +3,18 @@
 import type { LucideIcon } from 'lucide-react';
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
 
 interface TicketActionCardProps {
   icon: LucideIcon;
+  iconClassName?: string;
   title: string;
   children: React.ReactNode;
 }
 
 export function TicketActionCard({
   icon: Icon,
+  iconClassName,
   title,
   children,
 }: TicketActionCardProps) {
@@ -19,7 +22,7 @@ export function TicketActionCard({
     <Card>
       <CardHeader className="pb-4">
         <CardTitle className="flex items-center gap-2 text-base">
-          <Icon className="size-4 text-primary" />
+          <Icon className={cn('size-4 text-primary', iconClassName)} />
           {title}
         </CardTitle>
       </CardHeader>

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

@@ -26,6 +26,7 @@ export default function TicketDetailPage() {
 
   const liveState = useTicketDetailEvents(
     ticketId,
+    defectClass,
     Boolean(ticketId && ticket && ticket.status !== 'closed'),
   );
 

src/app/(modules)/ticket/hooks/useTicketDetailEvents.ts

@@ -1,7 +1,8 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
 
 import { API_ROUTES } from '@/constants/apiRoutes';
 import { useSseWithToken } from '@/hooks/sse/useSseWithToken';
@@ -32,21 +33,45 @@ function isHeartbeatEvent(event: { type?: string } | null | undefined) {
 
 export function useTicketDetailEvents(
   ticketId: string | undefined,
+  defectClass: string | undefined,
   enabled = true,
 ): TicketDetailLiveState {
+  const router = useRouter();
   const queryClient = useQueryClient();
+  const defectClassRef = useRef(defectClass);
   const [progress, setProgress] = useState<TicketProcessingProgress | null>(
     null,
   );
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
+  useEffect(() => {
+    defectClassRef.current = defectClass;
+  }, [defectClass]);
+
   const refetchTicket = useCallback(() => {
     if (!ticketId) return;
 
-    queryClient.refetchQueries({ queryKey: ticketKeys.detail(ticketId) });
+    queryClient.refetchQueries({
+      queryKey: ticketKeys.detail(ticketId, defectClassRef.current),
+    });
+    queryClient.invalidateQueries({
+      queryKey: ticketKeys.defectClasses(ticketId),
+    });
     queryClient.invalidateQueries({ queryKey: ticketKeys.lists() });
   }, [queryClient, ticketId]);
 
+  const selectDefectClass = useCallback(
+    (nextDefectClass: string | null | undefined) => {
+      if (!ticketId || !nextDefectClass || defectClassRef.current) return;
+
+      router.replace(
+        `/ticket/${ticketId}?defect_class=${encodeURIComponent(nextDefectClass)}`,
+        { scroll: false },
+      );
+    },
+    [router, ticketId],
+  );
+
   const getToken = useCallback(
     () => ticketService.createTicketEventsToken(ticketId as string),
     [ticketId],
@@ -77,6 +102,7 @@ export function useTicketDetailEvents(
           progress: 100,
           message: event.message,
         });
+        selectDefectClass(event.defect_class);
         refetchTicket();
       },
       error: (event: TicketStreamErrorEvent) => {
@@ -86,7 +112,7 @@ export function useTicketDetailEvents(
       },
       heartbeat: () => undefined,
     }),
-    [refetchTicket],
+    [refetchTicket, selectDefectClass],
   );
 
   const shouldStop = useCallback(
@@ -103,7 +129,7 @@ export function useTicketDetailEvents(
   useEffect(() => {
     setProgress(null);
     setErrorMessage(null);
-  }, [ticketId]);
+  }, [defectClass, ticketId]);
 
   useSseWithToken({
     enabled: Boolean(enabled && ticketId),

src/types/ticket/events.ts

@@ -36,6 +36,7 @@ export interface TicketProgressEvent {
   status: string;
   progress: number;
   message: string;
+  defect_class?: string | null;
 }
 
 export interface TicketStreamErrorEvent {