From 89391410daa96d99147c96bbd07172512354524a Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Wed, 13 May 2026 23:17:47 -0600
Subject: [PATCH] refactor(ui): replace loading text with skeleton placeholders
 across panels

Update multiple UI panels to use skeleton components instead of loading text or spinners.
Standardize loading states in AudiobookExportModal, AdminFeaturesPanel, AdminProvidersPanel,
DocumentSelectionModal, and SegmentsSidebar for improved visual consistency and user feedback.
---
 src/components/AudiobookExportModal.tsx       | 52 +++++++++++++++++--
 src/components/admin/AdminFeaturesPanel.tsx   | 44 ++++++++++++++--
 src/components/admin/AdminProvidersPanel.tsx  | 27 +++++++++-
 .../documents/DocumentSelectionModal.tsx      | 17 +++++-
 src/components/reader/SegmentsSidebar.tsx     | 45 ++++++++++++++--
 5 files changed, 173 insertions(+), 12 deletions(-)

diff --git a/src/components/AudiobookExportModal.tsx b/src/components/AudiobookExportModal.tsx
index 70095db..f15828f 100644
--- a/src/components/AudiobookExportModal.tsx
+++ b/src/components/AudiobookExportModal.tsx
@@ -7,7 +7,6 @@ import { ProgressPopup } from '@/components/ProgressPopup';
 import { ProgressCard } from '@/components/ProgressCard';
 import { DownloadIcon, CheckCircleIcon, XCircleIcon, ClockIcon, ChevronUpDownIcon, RefreshIcon, DotsVerticalIcon } from '@/components/icons/Icons';
 import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { LoadingSpinner } from '@/components/Spinner';
 import { useConfig } from '@/contexts/ConfigContext';
 import { useTTS } from '@/contexts/TTSContext';
 import { VoicesControlBase } from '@/components/player/VoicesControlBase';
@@ -472,9 +471,7 @@ export function AudiobookExportModal({
         subtitle="Only leaving the document cancels generation."
       >
                 {isLoadingExisting ? (
-                  <div className="flex justify-center py-8">
-                    <LoadingSpinner />
-                  </div>
+                  <AudiobookSettingsSkeleton />
                 ) : (
                   <>
 			                      <div className="space-y-4">
@@ -937,3 +934,50 @@ export function AudiobookExportModal({
     </>
   );
 }
+
+function AudiobookSettingsSkeleton() {
+  return (
+    <div className="space-y-4 animate-pulse" aria-label="Loading audiobook settings" aria-busy="true">
+      <div className="w-full rounded-xl border border-offbase bg-background overflow-hidden">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-offbase bg-base">
+          <div className="h-4 w-40 rounded bg-offbase" />
+          <div className="h-5 w-14 rounded bg-offbase" />
+        </div>
+        <div className="p-4 space-y-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <div className="h-3 w-16 rounded bg-offbase" />
+              <div className="h-9 w-full rounded-md bg-offbase" />
+            </div>
+            <div className="space-y-1.5">
+              <div className="h-3 w-16 rounded bg-offbase" />
+              <div className="h-9 w-full rounded-md bg-offbase" />
+            </div>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-1.5">
+              <div className="h-3 w-24 rounded bg-offbase" />
+              <div className="h-2 w-full rounded bg-offbase" />
+            </div>
+            <div className="space-y-1.5">
+              <div className="h-3 w-20 rounded bg-offbase" />
+              <div className="h-2 w-full rounded bg-offbase" />
+            </div>
+          </div>
+          <div className="h-9 w-full rounded-md bg-offbase" />
+        </div>
+      </div>
+
+      <div className="w-full rounded-xl border border-offbase bg-background overflow-hidden">
+        <div className="px-4 py-3 border-b border-offbase bg-base">
+          <div className="h-4 w-28 rounded bg-offbase" />
+        </div>
+        <div className="p-4 space-y-2">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div key={index} className="h-16 rounded-lg border border-offbase bg-base" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/admin/AdminFeaturesPanel.tsx b/src/components/admin/AdminFeaturesPanel.tsx
index 14c6e69..b1f5975 100644
--- a/src/components/admin/AdminFeaturesPanel.tsx
+++ b/src/components/admin/AdminFeaturesPanel.tsx
@@ -172,9 +172,7 @@ export function AdminFeaturesPanel() {
 
   if (!data) {
     return (
-      <Section title="TTS defaults" subtitle="Loading…">
-        <p className="text-xs text-muted">Fetching current values…</p>
-      </Section>
+      <AdminFeaturesSkeleton />
     );
   }
 
@@ -340,6 +338,46 @@ export function AdminFeaturesPanel() {
   );
 }
 
+function AdminFeaturesSkeleton() {
+  return (
+    <div className="space-y-4 animate-pulse" aria-label="Loading feature settings" aria-busy="true">
+      <Section
+        title="TTS defaults"
+        subtitle="Defaults for new users."
+        action={<div className="h-4 w-16 rounded bg-offbase" />}
+      >
+        <div className="space-y-1.5 pb-2 border-b border-offbase">
+          <div className="flex items-start justify-between gap-3">
+            <div className="space-y-1 min-w-0">
+              <div className="h-4 w-40 rounded bg-offbase" />
+              <div className="h-3 w-56 rounded bg-offbase" />
+            </div>
+            <div className="h-5 w-20 rounded bg-offbase" />
+          </div>
+          <div className="h-9 w-full rounded-md bg-offbase" />
+        </div>
+        <div className="space-y-2">
+          <div className="h-14 w-full rounded-md border border-offbase bg-background" />
+          <div className="h-14 w-full rounded-md border border-offbase bg-background" />
+          <div className="h-14 w-full rounded-md border border-offbase bg-background" />
+        </div>
+      </Section>
+
+      <Section
+        title="Site features"
+        subtitle="Feature flags for all users."
+        action={<div className="h-4 w-24 rounded bg-offbase" />}
+      >
+        <div className="space-y-2">
+          <div className="h-14 w-full rounded-md border border-offbase bg-background" />
+          <div className="h-14 w-full rounded-md border border-offbase bg-background" />
+          <div className="h-14 w-full rounded-md border border-offbase bg-background" />
+        </div>
+      </Section>
+    </div>
+  );
+}
+
 function SourceBadge({
   source,
   dirty,
diff --git a/src/components/admin/AdminProvidersPanel.tsx b/src/components/admin/AdminProvidersPanel.tsx
index 4384d99..6a0663d 100644
--- a/src/components/admin/AdminProvidersPanel.tsx
+++ b/src/components/admin/AdminProvidersPanel.tsx
@@ -502,7 +502,7 @@ export function AdminProvidersPanel() {
 
       <div className="space-y-0">
         {isLoading ? (
-          <p className="text-xs text-muted">Loading…</p>
+          <ProvidersListSkeleton />
         ) : providers.length === 0 ? (
           <p className="text-xs text-muted py-2">No shared providers configured yet.</p>
         ) : (
@@ -547,3 +547,28 @@ export function AdminProvidersPanel() {
     </Section>
   );
 }
+
+function ProvidersListSkeleton() {
+  const rows = Array.from({ length: 4 });
+  return (
+    <div className="animate-pulse space-y-0.5" aria-label="Loading shared providers" aria-busy="true">
+      {rows.map((_, index) => (
+        <div key={index} className="py-1.5 border-b border-offbase last:border-b-0">
+          <div className="flex items-start gap-3">
+            <div className="flex-1 min-w-0 space-y-1.5">
+              <div className="flex items-center gap-2">
+                <div className="h-4 w-36 rounded bg-offbase" />
+                <div className="h-4 w-20 rounded bg-offbase" />
+              </div>
+              <div className="h-3 w-4/5 rounded bg-offbase" />
+            </div>
+            <div className="shrink-0 flex gap-1.5 pt-0.5">
+              <div className="h-7 w-14 rounded-md bg-offbase" />
+              <div className="h-7 w-16 rounded-md bg-offbase" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/documents/DocumentSelectionModal.tsx b/src/components/documents/DocumentSelectionModal.tsx
index 4084a1e..666b5a1 100644
--- a/src/components/documents/DocumentSelectionModal.tsx
+++ b/src/components/documents/DocumentSelectionModal.tsx
@@ -164,7 +164,7 @@ export function DocumentSelectionModal({
 
                 <div className="flex-1 overflow-auto border border-offbase rounded-lg bg-background p-2 min-h-0">
                   {isLoading ? (
-                    <div className="flex items-center justify-center h-full text-muted">Loading documents...</div>
+                    <DocumentSelectionSkeleton />
                   ) : errorMessage ? (
                     <div className="flex items-center justify-center h-full text-red-500">{errorMessage}</div>
                   ) : files.length === 0 ? (
@@ -229,3 +229,18 @@ export function DocumentSelectionModal({
     </Transition>
   );
 }
+
+function DocumentSelectionSkeleton() {
+  const rows = Array.from({ length: 9 });
+  return (
+    <div className="h-full animate-pulse space-y-0.5" aria-label="Loading documents" aria-busy="true">
+      {rows.map((_, index) => (
+        <div key={index} className="flex items-center gap-3 px-3 py-2 rounded-md">
+          <div className="h-4 w-4 rounded-sm bg-offbase border border-offbase" />
+          <div className="h-3.5 flex-1 rounded bg-offbase" />
+          <div className="h-3 w-14 rounded bg-offbase" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/reader/SegmentsSidebar.tsx b/src/components/reader/SegmentsSidebar.tsx
index 5219932..e7a84f1 100644
--- a/src/components/reader/SegmentsSidebar.tsx
+++ b/src/components/reader/SegmentsSidebar.tsx
@@ -631,7 +631,7 @@ export function SegmentsSidebar({ isOpen, setIsOpen, documentId, epubBookRef }:
               ) : null}
             </>
           ) : isManifestLoading ? (
-            <span>Loading…</span>
+            <div className="animate-pulse h-3 w-36 rounded bg-offbase" aria-label="Loading segment summary" aria-busy="true" />
           ) : hasManifestError ? (
             <span className="text-red-500">error</span>
           ) : (
@@ -645,7 +645,7 @@ export function SegmentsSidebar({ isOpen, setIsOpen, documentId, epubBookRef }:
                 <div className="px-4 py-6 text-sm text-red-500">{manifestErrorMessage}</div>
               )}
               {isManifestLoading && (
-                <div className="px-4 py-6 text-sm text-muted">Loading segments…</div>
+                <SegmentsListSkeleton />
               )}
               {hasLoadedManifest && rowsToRender.length === 0 && (
                 <div className="px-4 py-10 flex flex-col items-center text-center gap-2">
@@ -787,13 +787,52 @@ export function SegmentsSidebar({ isOpen, setIsOpen, documentId, epubBookRef }:
                 </ul>
               )}
               {hasLoadedManifest && isLoadingMoreManifest && (
-                <div className="px-4 py-3 text-xs text-muted">Loading more segments…</div>
+                <SegmentsListSkeletonRows />
               )}
       </div>
     </ReaderSidebarShell>
   );
 }
 
+function SegmentsListSkeleton() {
+  return (
+    <div className="px-4 py-3">
+      <div className="animate-pulse space-y-3" aria-label="Loading segments" aria-busy="true">
+        <div className="h-3 w-40 rounded bg-offbase" />
+        {Array.from({ length: 8 }).map((_, index) => (
+          <div key={index} className="rounded-md border border-offbase bg-base px-3 py-2.5">
+            <div className="flex items-start gap-3">
+              <div className="h-3.5 w-8 rounded bg-offbase mt-0.5 shrink-0" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="h-3.5 w-11/12 rounded bg-offbase" />
+                <div className="h-3.5 w-3/4 rounded bg-offbase" />
+                <div className="flex items-center gap-2">
+                  <div className="h-2 w-2 rounded-full bg-offbase" />
+                  <div className="h-3 w-12 rounded bg-offbase" />
+                  <div className="h-4 w-20 rounded bg-offbase" />
+                </div>
+              </div>
+              <div className="h-6 w-6 rounded bg-offbase shrink-0" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SegmentsListSkeletonRows() {
+  return (
+    <div className="px-4 py-3 animate-pulse" aria-label="Loading more segments" aria-busy="true">
+      <div className="space-y-2">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <div key={index} className="h-12 rounded-md border border-offbase bg-base" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function SegmentMetadataPopover({ row }: { row: TTSSegmentRow }) {
   return (
     <Popover className="relative shrink-0">