fix(admin): shape the participant detail loading skeleton like its content

The loading fallback was two generic blocks that looked nothing like the
final layout, so the swap to real data jumped. Replace it with a
content-shaped placeholder: a stat-card skeleton (badge + id + 2-col
label/value grid) and a history section (heading + rows), mirroring
DetailBody so the transition is smooth.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: ut42tech

apps/admin/src/components/participant-detail-sheet.tsx

@@ -110,9 +110,28 @@ export function ParticipantDetailSheet({ participantId, onOpenChange }: Props) {
 
         <div className="flex flex-col gap-6 px-6 pb-8">
           {state.kind === 'loading' && (
+            // 実コンテンツ（DetailBody）と同じ骨格のプレースホルダにして、
+            // 読み込み完了時のレイアウトの飛びをなくす。
             <>
-              <Skeleton className="h-20 w-full" />
-              <Skeleton className="h-40 w-full" />
+              <section className="grid gap-3 rounded-lg border bg-card p-4">
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-5 w-16 rounded-full" />
+                  <Skeleton className="h-3.5 w-24" />
+                </div>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                  {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
+                    <Skeleton key={i} className={i % 2 === 0 ? 'h-4 w-20' : 'h-4 w-full'} />
+                  ))}
+                </div>
+              </section>
+              <section className="flex flex-col gap-2">
+                <Skeleton className="h-4 w-20" />
+                <div className="flex flex-col gap-2 rounded-lg border p-3">
+                  {[0, 1, 2, 3].map((i) => (
+                    <Skeleton key={i} className="h-6 w-full" />
+                  ))}
+                </div>
+              </section>
             </>
           )}