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/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),