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