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

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

@@ -37,15 +37,17 @@ export function TicketDefectClassTabs({
       (item) => item.class_name === defectClassParam,
     );
 
-    setSelectedClass((current) => {
-      if (hasUrlClass) return defectClassParam ?? undefined;
+    if (hasUrlClass) {
+      setSelectedClass(defectClassParam ?? undefined);
+      return;
+    }
 
-      return current &&
-        defectClasses.some((item) => item.class_name === current)
-        ? current
-        : defectClasses[0].class_name;
-    });
-  }, [defectClassParam, defectClasses]);
+    const firstClass = defectClasses[0].class_name;
+    const nextParams = new URLSearchParams(searchParams.toString());
+    nextParams.set('defect_class', firstClass);
+    setSelectedClass(firstClass);
+    router.replace(`${pathname}?${nextParams.toString()}`, { scroll: false });
+  }, [defectClassParam, defectClasses, pathname, router, searchParams]);
 
   const handleClassChange = (className: string) => {
     const nextParams = new URLSearchParams(searchParams.toString());
@@ -88,7 +90,10 @@ export function TicketDefectClassTabs({
         <CardHeader>
           <CardTitle className="flex items-center gap-2 text-base">
             <span>Issues</span>
-            <Badge variant="secondary" className="min-w-5 min-h-5 justify-center rounded-full">
+            <Badge
+              variant="secondary"
+              className="min-w-5 min-h-5 justify-center rounded-full"
+            >
               {defectClasses.length}
             </Badge>
           </CardTitle>