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

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

@@ -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>