From ec2f440c139d2c29d7f20a770c2e91c52e7120b9 Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 23 Apr 2026 12:37:33 -0500
Subject: [PATCH] Add library TeamSnap loading state

---
 frontend/src/pages/LibraryPage.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontend/src/pages/LibraryPage.tsx b/frontend/src/pages/LibraryPage.tsx
index 750dc64..c878377 100644
--- a/frontend/src/pages/LibraryPage.tsx
+++ b/frontend/src/pages/LibraryPage.tsx
@@ -102,6 +102,12 @@ export function LibraryPage() {
     }
     return counts;
   }, [pinsQuery.data]);
+  const isLoadingLibraryData =
+    walkup.sessionQuery.isLoading ||
+    walkup.teamsQuery.isLoading ||
+    walkup.membersQuery.isLoading ||
+    walkup.eventsQuery.isLoading ||
+    (walkup.isTeamSnap && Boolean(teamId && playerId) && (assetsQuery.isLoading || clipsQuery.isLoading || pinsQuery.isLoading));
 
   const deleteClipMutation = useMutation({
     mutationFn: (clipId: number) => api.deleteClip(clipId, playerId),
@@ -203,6 +209,21 @@ export function LibraryPage() {
     setManageMediaOpen(false);
   }
 
+  if (isLoadingLibraryData) {
+    return (
+      <section className="page-grid">
+        <div className="panel gameday-loading-panel" role="status" aria-live="polite">
+          <div className="gameday-loading-spinner spinner-border text-primary" aria-hidden="true" />
+          <div className="gameday-loading-copy">
+            <span className="gameday-loading-label">Waiting for TeamSnap</span>
+            <strong>Loading walkup clips</strong>
+            <span className="muted">Teams, roster details, and clip data are being fetched.</span>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
   if (!walkup.isTeamSnap) {
     return <section className="page-grid"><div className="panel">Reconnect with TeamSnap to manage walkup clips.</div></section>;
   }