From 7f3118f1ef08c89b9f0c252f413c5350a9c641bf Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 8 May 2026 08:13:45 -0500
Subject: [PATCH] add loading spinner to exports

---
 web/src/pages/Exports.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 7b336d7ad4..244fcf7635 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -5,6 +5,7 @@ import {
   CaseCard,
   ExportCard,
 } from "@/components/card/ExportCard";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -864,6 +865,7 @@ function Exports() {
           search={search}
           selectedExports={selectedExports}
           selectionMode={selectionMode}
+          isLoading={cases === undefined || rawExports === undefined}
           onSelectExport={onSelectExport}
           setSelected={setSelected}
           renameClip={onHandleRename}
@@ -882,6 +884,7 @@ function Exports() {
           activeJobs={activeJobsByCase["none"] || []}
           selectedExports={selectedExports}
           selectionMode={selectionMode}
+          isLoading={cases === undefined || rawExports === undefined}
           onSelectExport={onSelectExport}
           setSelectedCaseId={setSelectedCaseId}
           setSelected={setSelected}
@@ -903,6 +906,7 @@ type AllExportsViewProps = {
   activeJobs: ExportJob[];
   selectedExports: Export[];
   selectionMode: boolean;
+  isLoading: boolean;
   onSelectExport: (e: Export) => void;
   setSelectedCaseId: (id: string) => void;
   setSelected: (e: Export) => void;
@@ -919,6 +923,7 @@ function AllExportsView({
   activeJobs,
   selectedExports,
   selectionMode,
+  isLoading,
   onSelectExport,
   setSelectedCaseId,
   setSelected,
@@ -1027,6 +1032,8 @@ function AllExportsView({
             </div>
           )}
         </div>
+      ) : isLoading ? (
+        <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
       ) : (
         <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
           <LuFolderX className="size-16" />
@@ -1046,6 +1053,7 @@ type CaseViewProps = {
   search: string;
   selectedExports: Export[];
   selectionMode: boolean;
+  isLoading: boolean;
   onSelectExport: (e: Export) => void;
   setSelected: (e: Export) => void;
   renameClip: (id: string, update: string) => void;
@@ -1063,6 +1071,7 @@ function CaseView({
   search,
   selectedExports,
   selectionMode,
+  isLoading,
   onSelectExport,
   setSelected,
   renameClip,
@@ -1201,6 +1210,10 @@ function CaseView({
             />
           ))}
         </div>
+      ) : isLoading ? (
+        <div className="flex min-h-[16rem] flex-1 items-center justify-center">
+          <ActivityIndicator />
+        </div>
       ) : (
         <div className="flex min-h-[16rem] flex-col items-center justify-center p-6 text-center">
           <LuFolderX className="size-12" />