From 134b6986bcbc9558b1820cf73b23b0f865a39642 Mon Sep 17 00:00:00 2001
From: Yusef Habib Fernandez <yusef.fernandez@dfinity.org>
Date: Tue, 25 Aug 2026 07:55:33 +0200
Subject: [PATCH] ux(loading): make every loading state match the content it
 replaces

The app had six ways to show a load. Three of them showed generic grey
bars that did not match the page behind them.

Replace them with one set of content shaped shells, move the anti flicker
delay into CSS so every skeleton gets it, and route the raw spinner icons
through the shared `Spinner`.
---
 .../src/app/styles/main.css                   | 59 +++++++++++++
 .../common/components/MultipleSkeletons.tsx   | 15 ----
 .../src/common/components/MutationDialog.tsx  | 18 +---
 .../common/components/ProcessingSpinner.tsx   | 20 +++++
 .../src/common/components/QueryStates.tsx     | 11 ++-
 .../src/common/components/Skeleton.tsx        | 14 ++-
 .../components/skeletons/AccountsSkeleton.tsx | 49 +++++++++++
 .../skeletons/DashboardSkeleton.tsx           | 86 +++++++++++++++++++
 .../components/skeletons/NeuronsSkeleton.tsx  | 57 ++++++++++++
 .../skeletons/ProposalDetailSkeleton.tsx      | 51 +++++++++++
 .../skeletons/ProposalListSkeleton.tsx        | 44 ++++++++++
 .../components/skeletons/SettingsSkeleton.tsx | 34 ++++++++
 .../skeletons/SkeletonAccountCard.tsx         | 26 ++++++
 .../components/skeletons/SkeletonListRows.tsx | 55 ++++++++++++
 .../skeletons/SkeletonPageHeader.tsx          | 18 ++++
 .../components/skeletons/SkeletonScreen.tsx   | 19 ++++
 .../components/skeletons/SkeletonStatCard.tsx | 20 +++++
 .../components/skeletons/SkeletonText.tsx     | 35 ++++++++
 .../skeletons/SkeletonTransactionList.tsx     | 49 +++++++++++
 .../components/skeletons/VotingSkeleton.tsx   | 33 +++++++
 .../src/common/constants/extra.ts             |  4 -
 .../src/common/hooks/useDelayedFlag.ts        | 34 --------
 .../account/components/AccountCard.tsx        |  2 +-
 .../accounts/components/AccountsCard.tsx      |  8 +-
 .../accounts/components/AccountsList.tsx      | 11 +--
 .../accounts/components/AccountsListItem.tsx  |  2 +-
 .../accounts/components/AccountsTotalCard.tsx |  6 +-
 .../components/RecentTransactions.tsx         | 13 +--
 .../components/AddressBookModal.tsx           | 13 +--
 .../dashboard/components/DailyRewardsCard.tsx | 24 +++---
 .../dashboard/components/IcpPriceCard.tsx     | 29 ++++---
 .../dashboard/components/TotalStakedCard.tsx  | 43 +++++-----
 .../components/ProposalDetailsVoting.tsx      |  7 +-
 .../proposals/components/ProposalListItem.tsx |  6 +-
 .../components/FollowingStatusAlert.tsx       |  5 +-
 .../features/stakes/components/StakedCard.tsx |  4 +-
 .../neuronDetail/NeuronDetailDissolveView.tsx |  5 +-
 .../NeuronDetailIncreaseDelayView.tsx         |  5 +-
 .../NeuronDetailIncreaseStakeView.tsx         |  5 +-
 .../NeuronDetailMaturityModeView.tsx          |  5 +-
 .../StakingWizardStepConfirmation.tsx         | 18 +---
 .../components/summaryCards/CapitalCard.tsx   | 29 +++----
 .../components/summaryCards/EarningsCard.tsx  |  2 +-
 .../summaryCards/EngagementCard.tsx           |  4 +-
 .../components/TransactionListDialog.tsx      |  8 +-
 .../components/AdvancedFollowingModal.tsx     | 23 ++---
 .../voting/components/FollowedNeuronCard.tsx  |  2 +-
 .../voting/components/FolloweePicker.tsx      | 11 +--
 .../voting/components/KnownNeuronCard.tsx     |  4 +-
 .../components/SimpleFollowingModal.tsx       | 11 +--
 .../components/VotingOverviewAdvanced.tsx     | 21 ++---
 .../components/VotingOverviewSimple.tsx       | 20 +++--
 .../src/routes/_auth/accounts/index.tsx       |  2 +
 .../src/routes/_auth/dashboard/index.tsx      |  2 +
 .../src/routes/_auth/neurons/index.tsx        |  3 +
 .../src/routes/_auth/settings/index.tsx       |  2 +
 .../src/routes/_auth/voting/index.tsx         | 23 ++---
 .../_auth/voting/proposals/$id/index.tsx      |  8 +-
 58 files changed, 851 insertions(+), 286 deletions(-)
 delete mode 100644 src/governance-app-frontend/src/common/components/MultipleSkeletons.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/ProcessingSpinner.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/AccountsSkeleton.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/DashboardSkeleton.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/NeuronsSkeleton.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/ProposalDetailSkeleton.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/ProposalListSkeleton.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SettingsSkeleton.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SkeletonAccountCard.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SkeletonListRows.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SkeletonPageHeader.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SkeletonScreen.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SkeletonStatCard.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SkeletonText.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/SkeletonTransactionList.tsx
 create mode 100644 src/governance-app-frontend/src/common/components/skeletons/VotingSkeleton.tsx
 delete mode 100644 src/governance-app-frontend/src/common/hooks/useDelayedFlag.ts

diff --git a/src/governance-app-frontend/src/app/styles/main.css b/src/governance-app-frontend/src/app/styles/main.css
index 292779331..88f64a89e 100644
--- a/src/governance-app-frontend/src/app/styles/main.css
+++ b/src/governance-app-frontend/src/app/styles/main.css
@@ -61,6 +61,11 @@
   --sidebar-ring: var(--icp-accent-strong);
   --main-content: var(--icp-bg);
   --staking-ratio: var(--icp-section-teal);
+  /* Skeleton bars pulse between these two. The pulse animates a color, which
+     leaves `opacity` free for the delayed reveal. An ink wash on the parchment,
+     not a tint of the rust accent: a placeholder must not read as content. */
+  --skeleton-base: rgba(26, 26, 26, 0.07);
+  --skeleton-peak: rgba(26, 26, 26, 0.035);
 }
 
 .dark {
@@ -111,6 +116,8 @@
   --sidebar-ring: var(--icp-accent-strong);
   --main-content: var(--icp-bg);
   --staking-ratio: #3fafaa;
+  --skeleton-base: rgba(162, 154, 141, 0.2);
+  --skeleton-peak: rgba(162, 154, 141, 0.1);
 }
 
 @theme inline {
@@ -204,6 +211,58 @@
 }
 
 @layer utilities {
+  /*
+   * Skeleton bars.
+   *
+   * A bar claims its space on the first frame, so the content lands without a
+   * jump. It stays invisible for `--skeleton-delay` first, so a fast query
+   * resolves into content with no grey flash on the way.
+   *
+   * The reveal animates `opacity` and the pulse animates `background-color`.
+   * Two animations on one property fight, and the pulse is declared last, so
+   * it would win and cancel the delay.
+   */
+  @keyframes skeleton-reveal {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes skeleton-pulse {
+    0%,
+    100% {
+      background-color: var(--skeleton-base);
+    }
+    50% {
+      background-color: var(--skeleton-peak);
+    }
+  }
+
+  .skeleton {
+    --skeleton-delay: 120ms;
+    background-color: var(--skeleton-base);
+    animation:
+      skeleton-reveal 150ms ease-out var(--skeleton-delay) both,
+      skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) var(--skeleton-delay) infinite;
+  }
+
+  /*
+   * Keep the delayed reveal, drop the pulse. Spinners keep turning: they are
+   * the only sign that a mutation is still running.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton {
+      animation: skeleton-reveal 0s linear var(--skeleton-delay) both;
+    }
+
+    .animate-pulse {
+      animation: none;
+    }
+  }
+
   .text-hero-responsive {
     font-size: clamp(2rem, 5vh, 4rem);
     line-height: 1.1;
diff --git a/src/governance-app-frontend/src/common/components/MultipleSkeletons.tsx b/src/governance-app-frontend/src/common/components/MultipleSkeletons.tsx
deleted file mode 100644
index 0ec2480da..000000000
--- a/src/governance-app-frontend/src/common/components/MultipleSkeletons.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Skeleton } from '@components/Skeleton';
-
-type Props = {
-  count: number;
-};
-
-export const MultipleSkeletons = ({ count }: Props) => {
-  return (
-    <div className="flex flex-col gap-2">
-      {Array.from({ length: count }).map((_, index) => (
-        <Skeleton key={index} className="h-4 w-full" />
-      ))}
-    </div>
-  );
-};
diff --git a/src/governance-app-frontend/src/common/components/MutationDialog.tsx b/src/governance-app-frontend/src/common/components/MutationDialog.tsx
index 726d62034..b022938c3 100644
--- a/src/governance-app-frontend/src/common/components/MutationDialog.tsx
+++ b/src/governance-app-frontend/src/common/components/MutationDialog.tsx
@@ -1,10 +1,11 @@
-import { AlertTriangle, Loader } from 'lucide-react';
+import { AlertTriangle } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '@components/button';
 import { NavigationBlockerDialog } from '@components/NavigationBlockerDialog';
+import { ProcessingSpinner } from '@components/ProcessingSpinner';
 import {
   ResponsiveDialog,
   ResponsiveDialogContent,
@@ -131,7 +132,7 @@ export function MutationDialog({
                 <ResponsiveDialogTitle className="sr-only">
                   {processingMessage}
                 </ResponsiveDialogTitle>
-                <AnimatedSpinner />
+                <ProcessingSpinner />
                 <FadeInText delay={0.2}>{processingMessage}</FadeInText>
               </PhaseContainer>
             )}
@@ -232,19 +233,6 @@ function PhaseContainer({
   );
 }
 
-function AnimatedSpinner() {
-  return (
-    <motion.div
-      className="flex size-16 items-center justify-center rounded-full bg-primary/10"
-      initial={{ scale: 0.8, opacity: 0 }}
-      animate={{ scale: 1, opacity: 1 }}
-      transition={{ type: 'spring', stiffness: 200, damping: 15 }}
-    >
-      <Loader className="size-8 animate-spin text-primary" />
-    </motion.div>
-  );
-}
-
 function AnimatedSuccessIcon() {
   return (
     <motion.div
diff --git a/src/governance-app-frontend/src/common/components/ProcessingSpinner.tsx b/src/governance-app-frontend/src/common/components/ProcessingSpinner.tsx
new file mode 100644
index 000000000..fdb865cb4
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/ProcessingSpinner.tsx
@@ -0,0 +1,20 @@
+import { motion } from 'motion/react';
+
+import { Spinner } from '@components/Spinner';
+
+/**
+ * The spinner shown while a mutation runs.
+ *
+ * Every processing screen uses this one, so a transfer, a stake, and a vote all
+ * look the same while they wait.
+ */
+export const ProcessingSpinner = () => (
+  <motion.div
+    className="flex size-16 items-center justify-center rounded-full bg-primary/10"
+    initial={{ scale: 0.8, opacity: 0 }}
+    animate={{ scale: 1, opacity: 1 }}
+    transition={{ type: 'spring', stiffness: 200, damping: 15 }}
+  >
+    <Spinner className="size-8 text-primary" />
+  </motion.div>
+);
diff --git a/src/governance-app-frontend/src/common/components/QueryStates.tsx b/src/governance-app-frontend/src/common/components/QueryStates.tsx
index 48bcf259b..6b31306e1 100644
--- a/src/governance-app-frontend/src/common/components/QueryStates.tsx
+++ b/src/governance-app-frontend/src/common/components/QueryStates.tsx
@@ -1,10 +1,8 @@
 import { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
-import { useDelayedFlag } from '@hooks/useDelayedFlag';
-
 import { EmptyMessage } from './EmptyMessage';
-import { MultipleSkeletons } from './MultipleSkeletons';
+import { SkeletonText } from './skeletons/SkeletonText';
 import { WarningMessage } from './WarningMessage';
 
 type InfiniteQueryData<TData = unknown> = Partial<InfiniteData<TData, unknown>>;
@@ -42,11 +40,12 @@ export const QueryStates = <TData,>({
 }: Props<TData>) => {
   const { t } = useTranslation();
   const q = query || infiniteQuery;
-  const showLoading = useDelayedFlag(q.isLoading);
 
   if (q.isLoading) {
-    // Hold the frame empty until the delay elapses rather than flashing a skeleton.
-    return showLoading ? loadingComponent || <MultipleSkeletons count={3} /> : null;
+    // The skeleton holds the space at once and reveals itself after a short
+    // delay, so a fast query needs no hold-back here. See `.skeleton` in
+    // `main.css`. Pass a `loadingComponent` built from `Skeleton` to keep that.
+    return loadingComponent || <SkeletonText lines={3} />;
   }
 
   if (q.error) {
diff --git a/src/governance-app-frontend/src/common/components/Skeleton.tsx b/src/governance-app-frontend/src/common/components/Skeleton.tsx
index ed5c6a156..05f698126 100644
--- a/src/governance-app-frontend/src/common/components/Skeleton.tsx
+++ b/src/governance-app-frontend/src/common/components/Skeleton.tsx
@@ -1,10 +1,22 @@
 import { cn } from '@common/utils/shadcn';
 
+/**
+ * A placeholder bar.
+ *
+ * The look and the timing live in the `.skeleton` class in `main.css`: the bar
+ * holds its space from the first frame and stays invisible for a short delay,
+ * so a fast query resolves into content without a grey flash and without a
+ * jump. Pass size classes only; the colour comes from the theme.
+ *
+ * The bar is decorative. Wrap a group of them in `SkeletonScreen` so screen
+ * readers hear one "loading" for the region instead of one per bar.
+ */
 function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="skeleton"
-      className={cn('animate-pulse rounded-md bg-accent dark:bg-muted-foreground/20', className)}
+      aria-hidden={true}
+      className={cn('skeleton rounded-md', className)}
       {...props}
     />
   );
diff --git a/src/governance-app-frontend/src/common/components/skeletons/AccountsSkeleton.tsx b/src/governance-app-frontend/src/common/components/skeletons/AccountsSkeleton.tsx
new file mode 100644
index 000000000..13a0a5eba
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/AccountsSkeleton.tsx
@@ -0,0 +1,49 @@
+import { Card, CardContent, CardHeader } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonAccountCard } from './SkeletonAccountCard';
+import { SkeletonPageHeader } from './SkeletonPageHeader';
+import { SkeletonTransactionRows } from './SkeletonTransactionList';
+
+/**
+ * Mirrors the `/accounts` layout: total card, account list, recent activity.
+ *
+ * `SkeletonTransactionRows` inside announces the load, so this wrapper stays a
+ * plain `div`. Nested status regions read twice.
+ */
+export const AccountsSkeleton = () => (
+  <div className="flex flex-col gap-6">
+    <SkeletonPageHeader action={true} />
+
+    <Card>
+      <CardHeader className="flex flex-col gap-2">
+        <Skeleton className="h-5 w-40" />
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-5 w-20" />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <Skeleton className="h-3 w-full rounded-full" />
+        <div className="flex gap-4">
+          <Skeleton className="h-5 w-24" />
+          <Skeleton className="h-5 w-24" />
+        </div>
+      </CardContent>
+    </Card>
+
+    <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <div className="flex flex-col gap-4 lg:col-span-2">
+        <SkeletonAccountCard />
+        <SkeletonAccountCard />
+      </div>
+
+      <Card className="h-fit">
+        <CardHeader>
+          <Skeleton className="h-5 w-40" />
+        </CardHeader>
+        <CardContent>
+          <SkeletonTransactionRows />
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/DashboardSkeleton.tsx b/src/governance-app-frontend/src/common/components/skeletons/DashboardSkeleton.tsx
new file mode 100644
index 000000000..e07b4f6f4
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/DashboardSkeleton.tsx
@@ -0,0 +1,86 @@
+import { Card, CardContent, CardHeader } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonScreen } from './SkeletonScreen';
+import { SkeletonStatCard } from './SkeletonStatCard';
+import { SkeletonText } from './SkeletonText';
+
+/** Mirrors the `/dashboard` layout, so the real page lands in the same frame. */
+export const DashboardSkeleton = () => (
+  <SkeletonScreen className="flex flex-col gap-8">
+    {/* SmartTitle */}
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-10 w-full max-w-xl" />
+      <Skeleton className="h-10 w-full max-w-md" />
+    </div>
+
+    <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+      {/* TotalAssetsCard, with its radial chart. */}
+      <Card className="items-center pt-4 pb-6">
+        <CardHeader className="flex flex-col items-center gap-2">
+          <Skeleton className="h-5 w-28" />
+          <Skeleton className="h-8 w-40" />
+        </CardHeader>
+        <CardContent className="flex w-full justify-center">
+          <Skeleton className="aspect-square w-full max-w-48 rounded-full" />
+        </CardContent>
+      </Card>
+
+      {/* AccountCard or AccountsCard. */}
+      <Card className="pt-4 pb-6">
+        <CardHeader className="flex flex-col gap-2">
+          <Skeleton className="h-5 w-24" />
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-5 w-20" />
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          <Skeleton className="h-12 w-full" />
+        </CardContent>
+      </Card>
+
+      {/* StakedCard. */}
+      <Card className="pt-4 pb-6 md:col-span-2">
+        <CardHeader className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-5 w-16" />
+          </div>
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-5 w-20" />
+        </CardHeader>
+        <CardContent className="flex flex-col gap-6">
+          <div className="grid grid-cols-2 gap-6 border-t pt-4">
+            <Skeleton className="h-7 w-20 justify-self-end" />
+            <Skeleton className="h-7 w-20 justify-self-end" />
+          </div>
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <Skeleton className="h-12 w-full" />
+            <Skeleton className="h-12 w-full" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <div className="mt-4 flex flex-col gap-3">
+      <Skeleton className="h-9 w-64" />
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <SkeletonStatCard />
+        <SkeletonStatCard />
+        <SkeletonStatCard />
+        <SkeletonStatCard caption={false} />
+      </div>
+
+      {/* ExecutiveSummaryCard. */}
+      <Card>
+        <CardHeader className="flex flex-col gap-2">
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-9 w-48" />
+        </CardHeader>
+        <CardContent className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          <SkeletonText lines={4} />
+          <SkeletonText lines={4} />
+        </CardContent>
+      </Card>
+    </div>
+  </SkeletonScreen>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/NeuronsSkeleton.tsx b/src/governance-app-frontend/src/common/components/skeletons/NeuronsSkeleton.tsx
new file mode 100644
index 000000000..c65ba06ca
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/NeuronsSkeleton.tsx
@@ -0,0 +1,57 @@
+import { Card, CardContent, CardHeader } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonPageHeader } from './SkeletonPageHeader';
+import { SkeletonScreen } from './SkeletonScreen';
+import { SkeletonStatCard } from './SkeletonStatCard';
+
+/** One card in the neurons grid. */
+const SkeletonNeuronCard = () => (
+  <Card className="h-full">
+    <CardHeader className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-5 w-32" />
+        <Skeleton className="h-6 w-20" />
+      </div>
+      <Skeleton className="h-8 w-36" />
+      <Skeleton className="h-5 w-24" />
+    </CardHeader>
+    <CardContent className="flex flex-col gap-4">
+      <div className="grid grid-cols-2 gap-4 border-t pt-4">
+        <Skeleton className="h-6 w-24" />
+        <Skeleton className="h-6 w-24 justify-self-end" />
+      </div>
+      <Skeleton className="h-12 w-full" />
+    </CardContent>
+  </Card>
+);
+
+/**
+ * The summary row and the neuron grid, without the page header.
+ *
+ * The page keeps its own header while the neurons query runs, so this stands in
+ * for the part below it.
+ */
+export const NeuronsContentSkeleton = () => (
+  <SkeletonScreen className="flex flex-col gap-6">
+    <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">
+      <SkeletonStatCard />
+      <SkeletonStatCard />
+      <SkeletonStatCard />
+      <SkeletonStatCard />
+    </div>
+
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <SkeletonNeuronCard />
+      <SkeletonNeuronCard />
+    </div>
+  </SkeletonScreen>
+);
+
+/** Mirrors the whole `/neurons` layout. */
+export const NeuronsSkeleton = () => (
+  <div className="flex flex-col gap-6">
+    <SkeletonPageHeader action={true} />
+    <NeuronsContentSkeleton />
+  </div>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/ProposalDetailSkeleton.tsx b/src/governance-app-frontend/src/common/components/skeletons/ProposalDetailSkeleton.tsx
new file mode 100644
index 000000000..19d968a2c
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/ProposalDetailSkeleton.tsx
@@ -0,0 +1,51 @@
+import { Card, CardContent, CardHeader } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonScreen } from './SkeletonScreen';
+import { SkeletonText } from './SkeletonText';
+
+/**
+ * The summary card and the body card, without the back link.
+ *
+ * The page renders its own back link while the proposal query runs, so this
+ * stands in for the part below it.
+ */
+export const ProposalDetailContentSkeleton = () => (
+  <SkeletonScreen className="flex flex-col gap-6">
+    <Card>
+      <CardHeader className="flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <Skeleton className="mt-2 h-9 w-full max-w-2xl" />
+        <div className="flex flex-wrap gap-2">
+          <Skeleton className="h-6 w-20 rounded-full" />
+          <Skeleton className="h-6 w-28 rounded-full" />
+          <Skeleton className="h-6 w-24 rounded-full" />
+        </div>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <Skeleton className="h-2 w-full rounded-full" />
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardContent>
+        <SkeletonText lines={8} />
+      </CardContent>
+    </Card>
+  </SkeletonScreen>
+);
+
+/** Mirrors a single proposal page: back link, summary card, body card. */
+export const ProposalDetailSkeleton = () => (
+  <div className="flex flex-col gap-6">
+    <Skeleton className="h-5 w-40" />
+    <ProposalDetailContentSkeleton />
+  </div>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/ProposalListSkeleton.tsx b/src/governance-app-frontend/src/common/components/skeletons/ProposalListSkeleton.tsx
new file mode 100644
index 000000000..b2d4e0a8d
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/ProposalListSkeleton.tsx
@@ -0,0 +1,44 @@
+import { Card, CardHeader } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonScreen } from './SkeletonScreen';
+
+type Props = {
+  count?: number;
+};
+
+/** One row of the proposals list, badges and vote bar included. */
+const SkeletonProposalCard = () => (
+  <Card className="w-full overflow-hidden">
+    <CardHeader className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-28" />
+        <Skeleton className="h-4 w-20" />
+      </div>
+
+      <Skeleton className="h-6 w-full max-w-2xl" />
+
+      <div className="flex flex-col gap-2 lg:flex-row lg:flex-wrap lg:items-center">
+        <div className="flex flex-wrap items-center gap-2">
+          <Skeleton className="h-6 w-20 rounded-full" />
+          <Skeleton className="h-6 w-28 rounded-full" />
+          <Skeleton className="h-6 w-24 rounded-full" />
+        </div>
+        <div className="flex w-full min-w-[200px] flex-1 items-center gap-2 lg:ml-auto lg:w-auto lg:max-w-[500px]">
+          <Skeleton className="h-3 w-8" />
+          <Skeleton className="h-2 flex-grow rounded-full" />
+          <Skeleton className="h-3 w-8" />
+        </div>
+      </div>
+    </CardHeader>
+  </Card>
+);
+
+/** Stands in for the proposals list, in the page and in the infinite scroll. */
+export const ProposalListSkeleton = ({ count = 3 }: Props) => (
+  <SkeletonScreen className="flex flex-col gap-4">
+    {Array.from({ length: count }).map((_, index) => (
+      <SkeletonProposalCard key={index} />
+    ))}
+  </SkeletonScreen>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SettingsSkeleton.tsx b/src/governance-app-frontend/src/common/components/skeletons/SettingsSkeleton.tsx
new file mode 100644
index 000000000..17970836a
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SettingsSkeleton.tsx
@@ -0,0 +1,34 @@
+import { Card } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonPageHeader } from './SkeletonPageHeader';
+import { SkeletonScreen } from './SkeletonScreen';
+
+const SkeletonSection = ({ rows }: { rows: number }) => (
+  <div className="flex flex-col gap-4">
+    <Skeleton className="h-8 w-48" />
+    <Card className="overflow-hidden p-0">
+      <div className="flex flex-col divide-y">
+        {Array.from({ length: rows }).map((_, index) => (
+          <div key={index} className="flex items-center justify-between px-6 py-5">
+            <div className="flex flex-col gap-2">
+              <Skeleton className="h-5 w-40" />
+              <Skeleton className="h-4 w-64 max-w-full" />
+            </div>
+            <Skeleton className="h-8 w-16" />
+          </div>
+        ))}
+      </div>
+    </Card>
+  </div>
+);
+
+/** Mirrors the `/settings` layout: stacked sections of divided rows. */
+export const SettingsSkeleton = () => (
+  <SkeletonScreen className="flex flex-col gap-12">
+    <SkeletonPageHeader />
+    <SkeletonSection rows={3} />
+    <SkeletonSection rows={1} />
+    <SkeletonSection rows={4} />
+  </SkeletonScreen>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SkeletonAccountCard.tsx b/src/governance-app-frontend/src/common/components/skeletons/SkeletonAccountCard.tsx
new file mode 100644
index 000000000..9c5f3b3f0
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SkeletonAccountCard.tsx
@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader } from '@components/Card';
+import { Separator } from '@components/Separator';
+import { Skeleton } from '@components/Skeleton';
+
+/** Mirrors `AccountsListItem`: name, account id, balance, last transaction. */
+export const SkeletonAccountCard = () => (
+  <Card className="gap-3">
+    <CardHeader className="flex flex-col gap-0">
+      <div className="flex w-full items-start justify-between">
+        <div className="flex flex-col gap-0.5">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-6 w-40" />
+        </div>
+        <Skeleton className="size-9 rounded-md" />
+      </div>
+    </CardHeader>
+    <CardContent className="flex flex-col gap-3">
+      <div className="flex flex-col gap-0.5">
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-5 w-20" />
+      </div>
+      <Separator className="my-1" />
+      <Skeleton className="h-5 w-full" />
+    </CardContent>
+  </Card>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SkeletonListRows.tsx b/src/governance-app-frontend/src/common/components/skeletons/SkeletonListRows.tsx
new file mode 100644
index 000000000..86cf3fcbb
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SkeletonListRows.tsx
@@ -0,0 +1,55 @@
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonScreen } from './SkeletonScreen';
+
+type Props = {
+  count?: number;
+};
+
+/** Mirrors `AddressBookEntry`: name, address, two icon buttons, in a box. */
+export const SkeletonAddressBookRows = ({ count = 3 }: Props) => (
+  <SkeletonScreen className="flex flex-col gap-2">
+    {Array.from({ length: count }).map((_, index) => (
+      <div
+        key={index}
+        className="flex items-center justify-between gap-4 rounded-lg border bg-muted/20 p-4"
+      >
+        <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+          <Skeleton className="h-6 w-40" />
+          <Skeleton className="h-4 w-full max-w-xs" />
+        </div>
+        <div className="flex shrink-0 gap-1">
+          <Skeleton className="size-9 rounded-md" />
+          <Skeleton className="size-9 rounded-md" />
+        </div>
+      </div>
+    ))}
+  </SkeletonScreen>
+);
+
+/** Mirrors a picker row: leading control plus a label. */
+export const SkeletonPickerRows = ({ count = 3 }: Props) => (
+  <SkeletonScreen className="flex flex-col divide-y">
+    {Array.from({ length: count }).map((_, index) => (
+      <div key={index} className="flex items-center gap-4 p-4">
+        <Skeleton className="size-6 shrink-0 rounded-md" />
+        <Skeleton className="h-5 w-48" />
+      </div>
+    ))}
+  </SkeletonScreen>
+);
+
+/** Mirrors a topic row in the following accordion: dot, name, trailing value. */
+export const SkeletonTopicRows = ({ count = 3 }: Props) => (
+  <SkeletonScreen className="flex flex-col gap-4 py-4">
+    {Array.from({ length: count }).map((_, index) => (
+      <div key={index} className="flex items-center justify-between px-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="size-4 shrink-0 rounded-full" />
+          <Skeleton className="h-4 w-32" />
+        </div>
+        <Skeleton className="h-4 w-20" />
+      </div>
+    ))}
+  </SkeletonScreen>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SkeletonPageHeader.tsx b/src/governance-app-frontend/src/common/components/skeletons/SkeletonPageHeader.tsx
new file mode 100644
index 000000000..e1620c746
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SkeletonPageHeader.tsx
@@ -0,0 +1,18 @@
+import { Skeleton } from '@components/Skeleton';
+
+type Props = {
+  /** Mirrors `PageHeader`, which drops the paragraph when there is none. */
+  description?: boolean;
+  action?: boolean;
+};
+
+/** Matches the shape of `PageHeader`. */
+export const SkeletonPageHeader = ({ description = true, action = false }: Props) => (
+  <div className="flex flex-col gap-6 sm:flex-row sm:justify-between">
+    <div className="flex flex-col gap-2">
+      <Skeleton className="h-9 w-56" />
+      {description && <Skeleton className="h-5 w-72 max-w-full" />}
+    </div>
+    {action && <Skeleton className="h-12 w-full sm:w-40" />}
+  </div>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SkeletonScreen.tsx b/src/governance-app-frontend/src/common/components/skeletons/SkeletonScreen.tsx
new file mode 100644
index 000000000..0d89eafde
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SkeletonScreen.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next';
+
+type Props = React.ComponentProps<'div'>;
+
+/**
+ * Announces one loading region.
+ *
+ * The bars inside are `aria-hidden`, so without this wrapper a screen reader
+ * hears nothing at all while a page loads.
+ */
+export const SkeletonScreen = ({ className, children, ...props }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div role="status" aria-label={t(($) => $.common.loading)} className={className} {...props}>
+      {children}
+    </div>
+  );
+};
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SkeletonStatCard.tsx b/src/governance-app-frontend/src/common/components/skeletons/SkeletonStatCard.tsx
new file mode 100644
index 000000000..628061997
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SkeletonStatCard.tsx
@@ -0,0 +1,20 @@
+import { Card, CardContent } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+import { cn } from '@utils/shadcn';
+
+type Props = {
+  /** Mirrors the cards that carry a second, smaller line under the value. */
+  caption?: boolean;
+  className?: string;
+};
+
+/** Matches the small dashboard and stakes cards: label, value, caption. */
+export const SkeletonStatCard = ({ caption = true, className }: Props) => (
+  <Card className={cn('gap-3 py-4', className)}>
+    <CardContent>
+      <Skeleton className="mb-2 h-4 w-24" />
+      <Skeleton className="h-7 w-32 md:h-8" />
+      {caption && <Skeleton className="mt-1 h-5 w-20" />}
+    </CardContent>
+  </Card>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SkeletonText.tsx b/src/governance-app-frontend/src/common/components/skeletons/SkeletonText.tsx
new file mode 100644
index 000000000..60840cb6a
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SkeletonText.tsx
@@ -0,0 +1,35 @@
+import { Skeleton } from '@components/Skeleton';
+import { cn } from '@utils/shadcn';
+
+type Size = 'sm' | 'base' | 'lg';
+
+type Props = {
+  /** Number of bars. The last one is short, the way a paragraph ends. */
+  lines?: number;
+  /** Matches the text scale the bars stand in for. */
+  size?: Size;
+  className?: string;
+};
+
+const heights: Record<Size, string> = {
+  sm: 'h-3',
+  base: 'h-3.5',
+  lg: 'h-4',
+};
+
+const gaps: Record<Size, string> = {
+  sm: 'gap-2',
+  base: 'gap-2.5',
+  lg: 'gap-3',
+};
+
+export const SkeletonText = ({ lines = 3, size = 'base', className }: Props) => (
+  <div className={cn('flex flex-col', gaps[size], className)}>
+    {Array.from({ length: lines }).map((_, index) => (
+      <Skeleton
+        key={index}
+        className={cn(heights[size], index === lines - 1 && lines > 1 ? 'w-3/5' : 'w-full')}
+      />
+    ))}
+  </div>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/SkeletonTransactionList.tsx b/src/governance-app-frontend/src/common/components/skeletons/SkeletonTransactionList.tsx
new file mode 100644
index 000000000..9313e658f
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/SkeletonTransactionList.tsx
@@ -0,0 +1,49 @@
+import { Card, CardContent } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonScreen } from './SkeletonScreen';
+
+type Props = {
+  count?: number;
+};
+
+/** Mirrors `AccountTransactionItem`: icon, label, timestamp, amount. */
+export const SkeletonTransactionList = ({ count = 3 }: Props) => (
+  <SkeletonScreen className="flex flex-col gap-3">
+    {Array.from({ length: count }).map((_, index) => (
+      <Card key={index} className="p-0">
+        <CardContent className="px-6 py-4">
+          <div className="flex items-center gap-4">
+            <Skeleton className="size-11 shrink-0 rounded-full" />
+            <div className="flex w-full min-w-0 flex-col gap-2">
+              <div className="flex justify-between">
+                <Skeleton className="h-5 w-28" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+              <div className="flex items-center justify-between gap-2">
+                <Skeleton className="h-4 w-40" />
+                <Skeleton className="h-5 w-24" />
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    ))}
+  </SkeletonScreen>
+);
+
+/** The compact variant used inside the recent activity card. */
+export const SkeletonTransactionRows = ({ count = 3 }: Props) => (
+  <SkeletonScreen className="flex flex-col gap-3">
+    {Array.from({ length: count }).map((_, index) => (
+      <div key={index} className="flex items-center gap-3">
+        <Skeleton className="size-10 shrink-0 rounded-full" />
+        <div className="flex flex-1 flex-col gap-1">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-3 w-16" />
+        </div>
+        <Skeleton className="h-4 w-16" />
+      </div>
+    ))}
+  </SkeletonScreen>
+);
diff --git a/src/governance-app-frontend/src/common/components/skeletons/VotingSkeleton.tsx b/src/governance-app-frontend/src/common/components/skeletons/VotingSkeleton.tsx
new file mode 100644
index 000000000..f2a153a08
--- /dev/null
+++ b/src/governance-app-frontend/src/common/components/skeletons/VotingSkeleton.tsx
@@ -0,0 +1,33 @@
+import { Card, CardContent } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { ProposalListSkeleton } from './ProposalListSkeleton';
+import { SkeletonPageHeader } from './SkeletonPageHeader';
+
+/**
+ * Mirrors the `/voting` layout: header, following card, proposals list.
+ *
+ * `ProposalListSkeleton` inside announces the load, so this wrapper stays a
+ * plain `div`. Nested status regions read twice.
+ */
+export const VotingSkeleton = () => (
+  <div className="flex flex-col gap-6">
+    <SkeletonPageHeader action={true} />
+
+    {/* FollowedNeuronCard. */}
+    <Card className="p-0">
+      <CardContent className="flex items-center justify-between gap-4 p-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="size-9 rounded-md" />
+          <Skeleton className="h-6 w-48" />
+        </div>
+        <Skeleton className="h-8 w-36" />
+      </CardContent>
+    </Card>
+
+    <div className="flex flex-col gap-4">
+      <Skeleton className="h-10 w-56 rounded-full" />
+      <ProposalListSkeleton />
+    </div>
+  </div>
+);
diff --git a/src/governance-app-frontend/src/common/constants/extra.ts b/src/governance-app-frontend/src/common/constants/extra.ts
index 39cd2b133..8425675c4 100644
--- a/src/governance-app-frontend/src/common/constants/extra.ts
+++ b/src/governance-app-frontend/src/common/constants/extra.ts
@@ -14,10 +14,6 @@ export const PAGINATION_LIMIT_PROPOSALS = 25;
 // Somehow this one has a different limit in case of a certified request.
 export const PAGINATION_LIMIT_TRANSACTIONS = 50;
 
-// Loading indicators are held back for this long before appearing, so a fast
-// response resolves into content instead of flashing a skeleton on the way.
-export const LOADING_INDICATOR_DELAY = 120;
-
 export const E8S_PRECISION = 8;
 export const E8S = 10 ** E8S_PRECISION;
 export const E8Sn = BigInt(E8S);
diff --git a/src/governance-app-frontend/src/common/hooks/useDelayedFlag.ts b/src/governance-app-frontend/src/common/hooks/useDelayedFlag.ts
deleted file mode 100644
index ae1aa6f6f..000000000
--- a/src/governance-app-frontend/src/common/hooks/useDelayedFlag.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { LOADING_INDICATOR_DELAY } from '@constants/extra';
-
-/**
- * Returns `true` only once `active` has stayed true for `delayMs`.
- *
- * Used to hold back loading indicators. Queries resolve at whatever speed the
- * network allows — a warm IC query call comes back in well under 100ms — and
- * painting a skeleton for a handful of frames on the way to content reads as a
- * flicker. Delaying the *indicator* keeps that away without delaying the data.
- */
-export const useDelayedFlag = (active: boolean, delayMs: number = LOADING_INDICATOR_DELAY) => {
-  const [elapsed, setElapsed] = useState(false);
-  const [previousActive, setPreviousActive] = useState(active);
-
-  // Rearm on any change of `active`, so the next active spell waits the delay
-  // out again. Adjusting during render rather than in an effect: React reruns
-  // this component before committing, so no extra frame is shown.
-  if (previousActive !== active) {
-    setPreviousActive(active);
-    setElapsed(false);
-  }
-
-  useEffect(() => {
-    if (!active) return;
-
-    const timeout = window.setTimeout(() => setElapsed(true), delayMs);
-
-    return () => window.clearTimeout(timeout);
-  }, [active, delayMs]);
-
-  return active && elapsed;
-};
diff --git a/src/governance-app-frontend/src/features/account/components/AccountCard.tsx b/src/governance-app-frontend/src/features/account/components/AccountCard.tsx
index ee1fb4cb1..66eb5c252 100644
--- a/src/governance-app-frontend/src/features/account/components/AccountCard.tsx
+++ b/src/governance-app-frontend/src/features/account/components/AccountCard.tsx
@@ -77,7 +77,7 @@ export function AccountCard() {
             )}
 
             {balanceQuery.isLoading || tickersQuery.isLoading ? (
-              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-5 w-20" />
             ) : (
               <p className="text-sm text-muted-foreground">
                 <SensitiveValue size="sm">
diff --git a/src/governance-app-frontend/src/features/accounts/components/AccountsCard.tsx b/src/governance-app-frontend/src/features/accounts/components/AccountsCard.tsx
index dd3e226c1..e4daad7b9 100644
--- a/src/governance-app-frontend/src/features/accounts/components/AccountsCard.tsx
+++ b/src/governance-app-frontend/src/features/accounts/components/AccountsCard.tsx
@@ -41,7 +41,7 @@ export const AccountsCard = () => {
             {t(($) => $.accounts.title)}
           </p>
           {isLoading ? (
-            <Skeleton className="h-5 w-5 rounded-full" />
+            <Skeleton className="size-5 rounded-full" />
           ) : (
             <Badge variant="outline">{count}</Badge>
           )}
@@ -59,7 +59,7 @@ export const AccountsCard = () => {
           )}
 
           {isLoading || tickersQuery.isLoading ? (
-            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-5 w-20" />
           ) : (
             <p className="text-sm text-muted-foreground">
               <SensitiveValue size="sm">
@@ -75,8 +75,8 @@ export const AccountsCard = () => {
           <div className="flex flex-col divide-y">
             {Array.from({ length: 2 }).map((_, i) => (
               <div key={i} className="flex items-center justify-between py-2.5">
-                <Skeleton className="h-4 w-24" />
-                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-5 w-24" />
+                <Skeleton className="h-5 w-20" />
               </div>
             ))}
           </div>
diff --git a/src/governance-app-frontend/src/features/accounts/components/AccountsList.tsx b/src/governance-app-frontend/src/features/accounts/components/AccountsList.tsx
index b75cc017e..82f4c8110 100644
--- a/src/governance-app-frontend/src/features/accounts/components/AccountsList.tsx
+++ b/src/governance-app-frontend/src/features/accounts/components/AccountsList.tsx
@@ -1,4 +1,5 @@
-import { Skeleton } from '@components/Skeleton';
+import { SkeletonAccountCard } from '@components/skeletons/SkeletonAccountCard';
+import { SkeletonScreen } from '@components/skeletons/SkeletonScreen';
 
 import { useAccounts } from '../hooks/useAccounts';
 import { AccountsListItem } from './AccountsListItem';
@@ -9,10 +10,10 @@ export const AccountsList = () => {
 
   if (!accountsState) {
     return (
-      <div className="flex flex-col gap-4">
-        <Skeleton className="h-40 rounded-xl" />
-        <Skeleton className="h-40 rounded-xl" />
-      </div>
+      <SkeletonScreen className="flex flex-col gap-4">
+        <SkeletonAccountCard />
+        <SkeletonAccountCard />
+      </SkeletonScreen>
     );
   }
 
diff --git a/src/governance-app-frontend/src/features/accounts/components/AccountsListItem.tsx b/src/governance-app-frontend/src/features/accounts/components/AccountsListItem.tsx
index 4d1a7f924..f323d0843 100644
--- a/src/governance-app-frontend/src/features/accounts/components/AccountsListItem.tsx
+++ b/src/governance-app-frontend/src/features/accounts/components/AccountsListItem.tsx
@@ -116,7 +116,7 @@ function AccountBalance({
     return (
       <div className="flex flex-col gap-0.5">
         <Skeleton className="h-8 w-32" />
-        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-5 w-20" />
       </div>
     );
   }
diff --git a/src/governance-app-frontend/src/features/accounts/components/AccountsTotalCard.tsx b/src/governance-app-frontend/src/features/accounts/components/AccountsTotalCard.tsx
index 2681d8be5..1286641b4 100644
--- a/src/governance-app-frontend/src/features/accounts/components/AccountsTotalCard.tsx
+++ b/src/governance-app-frontend/src/features/accounts/components/AccountsTotalCard.tsx
@@ -64,7 +64,7 @@ export const AccountsTotalCard = () => {
             </p>
           )}
           {isLoading || tickersQuery.isLoading ? (
-            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-5 w-20" />
           ) : (
             <p className="text-sm text-muted-foreground">
               <SensitiveValue size="sm">
@@ -96,8 +96,8 @@ export const AccountsTotalCard = () => {
 
         {isLoading ? (
           <div className="flex gap-4">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-5 w-24" />
           </div>
         ) : (
           <div className="flex flex-wrap gap-x-4 gap-y-1">
diff --git a/src/governance-app-frontend/src/features/accounts/components/RecentTransactions.tsx b/src/governance-app-frontend/src/features/accounts/components/RecentTransactions.tsx
index a2621b2c9..fd2c37379 100644
--- a/src/governance-app-frontend/src/features/accounts/components/RecentTransactions.tsx
+++ b/src/governance-app-frontend/src/features/accounts/components/RecentTransactions.tsx
@@ -5,7 +5,7 @@ import { txConfig } from '@features/transactions/utils/txConfig';
 import { Badge } from '@components/badge';
 import { Card, CardContent, CardHeader } from '@components/Card';
 import { SensitiveValue } from '@components/SensitiveValue';
-import { Skeleton } from '@components/Skeleton';
+import { SkeletonTransactionRows } from '@components/skeletons/SkeletonTransactionList';
 import { E8Sn } from '@constants/extra';
 import { bigIntDiv } from '@utils/bigInt';
 import { secondsToDate, secondsToTime } from '@utils/date';
@@ -29,16 +29,7 @@ export const RecentTransactions = () => {
 
       <CardContent className="flex flex-col gap-3">
         {isLoading ? (
-          Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="flex items-center gap-3">
-              <Skeleton className="size-10 shrink-0 rounded-full" />
-              <div className="flex flex-1 flex-col gap-1">
-                <Skeleton className="h-4 w-24" />
-                <Skeleton className="h-3 w-16" />
-              </div>
-              <Skeleton className="h-4 w-16" />
-            </div>
-          ))
+          <SkeletonTransactionRows />
         ) : transactions && transactions.length > 0 ? (
           transactions.map((tx) => <TransactionRow key={`${tx.accountId}-${tx.id}`} tx={tx} />)
         ) : (
diff --git a/src/governance-app-frontend/src/features/addressBook/components/AddressBookModal.tsx b/src/governance-app-frontend/src/features/addressBook/components/AddressBookModal.tsx
index 5d823fd06..bb005d4f8 100644
--- a/src/governance-app-frontend/src/features/addressBook/components/AddressBookModal.tsx
+++ b/src/governance-app-frontend/src/features/addressBook/components/AddressBookModal.tsx
@@ -16,7 +16,7 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
 } from '@components/ResponsiveDialog';
-import { Spinner } from '@components/Spinner';
+import { SkeletonAddressBookRows } from '@components/skeletons/SkeletonListRows';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@components/Tooltip';
 import { ADDRESS_BOOK_MAX_ENTRIES } from '@constants/addressBook';
 import { useAddressBook } from '@hooks/addressBook/useAddressBook';
@@ -80,16 +80,7 @@ export const AddressBookModal: React.FC<Props> = ({ isOpen, onOpenChange }) => {
             <QueryStates<CertifiedData<AddressBook>>
               query={addressBookQuery}
               isEmpty={(data) => data.response.named_addresses.length === 0}
-              loadingComponent={
-                <div className="flex flex-col items-center justify-center gap-4 py-16">
-                  <div className="rounded-full bg-muted p-4">
-                    <Spinner className="size-8" />
-                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    {t(($) => $.addressBook.sendFlow.tooltipLoading)}
-                  </p>
-                </div>
-              }
+              loadingComponent={<SkeletonAddressBookRows />}
               emptyComponent={
                 <div
                   className="flex flex-col items-center gap-5 py-12 text-center"
diff --git a/src/governance-app-frontend/src/features/dashboard/components/DailyRewardsCard.tsx b/src/governance-app-frontend/src/features/dashboard/components/DailyRewardsCard.tsx
index b96a484ee..4fc5a2d6d 100644
--- a/src/governance-app-frontend/src/features/dashboard/components/DailyRewardsCard.tsx
+++ b/src/governance-app-frontend/src/features/dashboard/components/DailyRewardsCard.tsx
@@ -57,17 +57,19 @@ export const DailyRewardsCard = () => {
             )}
           </p>
         )}
-        {isRewardEventLoading ? (
-          <Skeleton className="mt-1 h-4 w-32" />
-        ) : (
-          nonNullish(lastRewardTimestamp) && (
-            <p className="mt-1 text-sm font-normal text-muted-foreground">
-              {t(($) => $.home.lastRewardEvent, {
-                date: secondsToDate(Number(lastRewardTimestamp)),
-              })}
-            </p>
-          )
-        )}
+        <div className="mt-1 min-h-5">
+          {isRewardEventLoading ? (
+            <Skeleton className="h-5 w-32" />
+          ) : (
+            nonNullish(lastRewardTimestamp) && (
+              <p className="text-sm font-normal text-muted-foreground">
+                {t(($) => $.home.lastRewardEvent, {
+                  date: secondsToDate(Number(lastRewardTimestamp)),
+                })}
+              </p>
+            )
+          )}
+        </div>
       </CardContent>
     </Card>
   );
diff --git a/src/governance-app-frontend/src/features/dashboard/components/IcpPriceCard.tsx b/src/governance-app-frontend/src/features/dashboard/components/IcpPriceCard.tsx
index 095d2c036..bb1c8811c 100644
--- a/src/governance-app-frontend/src/features/dashboard/components/IcpPriceCard.tsx
+++ b/src/governance-app-frontend/src/features/dashboard/components/IcpPriceCard.tsx
@@ -28,25 +28,28 @@ export const IcpPriceCard = () => {
           {t(($) => $.home.icpPrice)}
         </p>
         {tickersQuery.isLoading ? (
-          <>
-            <Skeleton className="mb-2 h-8 w-24" />
-            <Skeleton className="h-4 w-20" />
-          </>
+          <Skeleton className="h-8 w-24" />
         ) : (
-          <>
-            <p className="text-2xl font-semibold text-foreground">
-              {icpPriceUsd ? `$${icpPriceUsd}` : '—'}
-            </p>
-            {nonNullish(change) && (
+          <p className="text-2xl font-semibold text-foreground">
+            {icpPriceUsd ? `$${icpPriceUsd}` : '—'}
+          </p>
+        )}
+        {/* The row keeps its height with or without a change, so the card does
+            not shrink when the skeleton leaves. */}
+        <div className="mt-1 min-h-5">
+          {tickersQuery.isLoading ? (
+            <Skeleton className="h-5 w-20" />
+          ) : (
+            nonNullish(change) && (
               <p
-                className={`mt-1 flex items-center gap-1 text-sm font-medium ${isPositive ? 'text-emerald-700 dark:text-emerald-400' : 'text-red-700 dark:text-red-400'}`}
+                className={`flex items-center gap-1 text-sm font-medium ${isPositive ? 'text-emerald-700 dark:text-emerald-400' : 'text-red-700 dark:text-red-400'}`}
               >
                 <span>{isPositive ? '▲' : '▼'}</span>
                 {formatPercentage(Math.abs(change))} ({t(($) => $.home.icpPrice24h)})
               </p>
-            )}
-          </>
-        )}
+            )
+          )}
+        </div>
       </CardContent>
     </Card>
   );
diff --git a/src/governance-app-frontend/src/features/dashboard/components/TotalStakedCard.tsx b/src/governance-app-frontend/src/features/dashboard/components/TotalStakedCard.tsx
index bc6adb192..5e9cfdccb 100644
--- a/src/governance-app-frontend/src/features/dashboard/components/TotalStakedCard.tsx
+++ b/src/governance-app-frontend/src/features/dashboard/components/TotalStakedCard.tsx
@@ -35,32 +35,33 @@ export const TotalStakedCard = () => {
           {t(($) => $.home.totalStaked)}
         </p>
         {isLoading ? (
-          <>
-            <Skeleton className="mb-2 h-8 w-40" />
-            <Skeleton className="h-4 w-28" />
-          </>
+          <Skeleton className="h-8 w-40" />
         ) : (
-          <>
-            <p className="text-2xl font-semibold text-foreground">
-              {nonNullish(tvl) ? (
-                <AnimatedNumber
-                  value={tvl}
-                  prefix="$"
-                  formatOptions={{ minFraction: 0, maxFraction: 0 }}
-                />
-              ) : (
-                '—'
-              )}
-            </p>
-            {nonNullish(stakedPercentage) && (
-              <p className="mt-1 text-sm font-normal text-muted-foreground">
+          <p className="text-2xl font-semibold text-foreground">
+            {nonNullish(tvl) ? (
+              <AnimatedNumber
+                value={tvl}
+                prefix="$"
+                formatOptions={{ minFraction: 0, maxFraction: 0 }}
+              />
+            ) : (
+              '—'
+            )}
+          </p>
+        )}
+        <div className="mt-1 min-h-5">
+          {isLoading ? (
+            <Skeleton className="h-5 w-28" />
+          ) : (
+            nonNullish(stakedPercentage) && (
+              <p className="text-sm font-normal text-muted-foreground">
                 {t(($) => $.home.ofTotalSupply, {
                   value: formatNumber(stakedPercentage, { minFraction: 1, maxFraction: 1 }),
                 })}
               </p>
-            )}
-          </>
-        )}
+            )
+          )}
+        </div>
       </CardContent>
     </Card>
   );
diff --git a/src/governance-app-frontend/src/features/proposals/components/ProposalDetailsVoting.tsx b/src/governance-app-frontend/src/features/proposals/components/ProposalDetailsVoting.tsx
index 4dda0bac9..3d19ec394 100644
--- a/src/governance-app-frontend/src/features/proposals/components/ProposalDetailsVoting.tsx
+++ b/src/governance-app-frontend/src/features/proposals/components/ProposalDetailsVoting.tsx
@@ -1,11 +1,12 @@
 import { ProposalInfo, Vote } from '@icp-sdk/canisters/nns';
 import { useInternetIdentity } from 'ic-use-internet-identity';
-import { CheckCircle, Loader2, ThumbsDown, ThumbsUp, TriangleAlert } from 'lucide-react';
+import { CheckCircle, ThumbsDown, ThumbsUp, TriangleAlert } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Button } from '@components/button';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@components/Card';
+import { Spinner } from '@components/Spinner';
 import { E8S } from '@constants/extra';
 import { formatNumber, formatPercentage } from '@utils/numbers';
 import { cn } from '@utils/shadcn';
@@ -178,7 +179,7 @@ export const ProposalDetailsVoting: React.FC<Props> = ({ proposal }) => {
                 variant="outline"
               >
                 {isVoting && votingFor === Vote.Yes ? (
-                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  <Spinner className="mr-2" />
                 ) : (
                   <ThumbsUp className="mr-2 size-4" />
                 )}
@@ -197,7 +198,7 @@ export const ProposalDetailsVoting: React.FC<Props> = ({ proposal }) => {
                 variant="outline"
               >
                 {isVoting && votingFor === Vote.No ? (
-                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  <Spinner className="mr-2" />
                 ) : (
                   <ThumbsDown className="mr-2 size-4" />
                 )}
diff --git a/src/governance-app-frontend/src/features/proposals/components/ProposalListItem.tsx b/src/governance-app-frontend/src/features/proposals/components/ProposalListItem.tsx
index 16e65d44a..357725c87 100644
--- a/src/governance-app-frontend/src/features/proposals/components/ProposalListItem.tsx
+++ b/src/governance-app-frontend/src/features/proposals/components/ProposalListItem.tsx
@@ -3,7 +3,6 @@ import { secondsToDuration } from '@dfinity/utils';
 import {
   CheckCircle,
   Clock,
-  Loader2,
   MessageSquareOff,
   ShieldBan,
   Tag,
@@ -18,6 +17,7 @@ import { Badge } from '@components/badge';
 import { Button } from '@components/button';
 import { Card, CardFooter, CardHeader } from '@components/Card';
 import { CertifiedBadge } from '@components/CertifiedBadge';
+import { Spinner } from '@components/Spinner';
 import { E8S } from '@constants/extra';
 import { formatPercentage } from '@utils/numbers';
 import { cn } from '@utils/shadcn';
@@ -210,7 +210,7 @@ export function ProposalListItem({ proposal, certified, isSpam, isNonActionable
                 variant="outline"
               >
                 {isVoting && votingFor === Vote.Yes ? (
-                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  <Spinner className="mr-2" />
                 ) : (
                   <ThumbsUp className="mr-2 size-4" />
                 )}
@@ -229,7 +229,7 @@ export function ProposalListItem({ proposal, certified, isSpam, isNonActionable
                 variant="outline"
               >
                 {isVoting && votingFor === Vote.No ? (
-                  <Loader2 className="mr-2 size-4 animate-spin" />
+                  <Spinner className="mr-2" />
                 ) : (
                   <ThumbsDown className="mr-2 size-4" />
                 )}
diff --git a/src/governance-app-frontend/src/features/stakes/components/FollowingStatusAlert.tsx b/src/governance-app-frontend/src/features/stakes/components/FollowingStatusAlert.tsx
index cc49f9d9c..866bf349e 100644
--- a/src/governance-app-frontend/src/features/stakes/components/FollowingStatusAlert.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/FollowingStatusAlert.tsx
@@ -1,7 +1,7 @@
 import type { NeuronInfo } from '@icp-sdk/canisters/nns';
 import { isNullish } from '@dfinity/utils';
 import { Link } from '@tanstack/react-router';
-import { AlertTriangle, ArrowRight, Clock, Loader2, TrendingDown } from 'lucide-react';
+import { AlertTriangle, ArrowRight, Clock, TrendingDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { AnalyticsEvent } from '@features/analytics/events';
@@ -9,6 +9,7 @@ import { analytics } from '@features/analytics/service';
 
 import { Alert, AlertDescription, AlertTitle } from '@components/Alert';
 import { Button } from '@components/button';
+import { Spinner } from '@components/Spinner';
 import { useGovernanceEconomics } from '@hooks/governance/useGovernanceEconomics';
 import { mapCanisterError } from '@utils/errors';
 import {
@@ -142,7 +143,7 @@ export function FollowingStatusAlert({ neuron, isHotkey }: Props) {
           >
             {isPending ? (
               <>
-                <Loader2 className="mr-2 size-4 animate-spin" />
+                <Spinner className="mr-2" />
                 {t(($) => $.neuron.followingStatus.processing)}
               </>
             ) : (
diff --git a/src/governance-app-frontend/src/features/stakes/components/StakedCard.tsx b/src/governance-app-frontend/src/features/stakes/components/StakedCard.tsx
index 7aa33910f..7902b3d8f 100644
--- a/src/governance-app-frontend/src/features/stakes/components/StakedCard.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/StakedCard.tsx
@@ -91,7 +91,7 @@ export function StakedCard() {
                 {stakingRewards.apy.cur < stakingRewards.apy.max && <ApyOptimizationModal />}
               </span>
             ) : (
-              <Skeleton className="h-5 w-16" />
+              <Skeleton className="h-7 w-16" />
             )}
           </div>
         </div>
@@ -108,7 +108,7 @@ export function StakedCard() {
           )}
 
           {neuronsQuery.isLoading || tickersQuery.isLoading ? (
-            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-5 w-20" />
           ) : (
             <p className="text-sm text-muted-foreground">
               <SensitiveValue size="sm">
diff --git a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailDissolveView.tsx b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailDissolveView.tsx
index 0cce14495..e3c75cc77 100644
--- a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailDissolveView.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailDissolveView.tsx
@@ -1,9 +1,10 @@
 import type { NeuronInfo } from '@icp-sdk/canisters/nns';
-import { AlertTriangle, Info, Key, Loader2 } from 'lucide-react';
+import { AlertTriangle, Info, Key } from 'lucide-react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Alert, AlertDescription } from '@components/Alert';
 import { Button } from '@components/button';
+import { Spinner } from '@components/Spinner';
 import { mapCanisterError } from '@utils/errors';
 import { errorNotification, successNotification } from '@utils/notification';
 
@@ -124,7 +125,7 @@ export function NeuronDetailDissolveView({
       >
         {isPending ? (
           <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Spinner className="mr-2" />
             {isDissolving
               ? t(($) => $.neuronDetailModal.dissolve.confirmingStop)
               : t(($) => $.neuronDetailModal.dissolve.confirmingStart)}
diff --git a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseDelayView.tsx b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseDelayView.tsx
index f57409cf6..37f056cf9 100644
--- a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseDelayView.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseDelayView.tsx
@@ -1,11 +1,12 @@
 import type { NeuronInfo } from '@icp-sdk/canisters/nns';
-import { AlertTriangle, Key, Loader2 } from 'lucide-react';
+import { AlertTriangle, Key } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Alert, AlertDescription } from '@components/Alert';
 import { Button } from '@components/button';
 import { MaxRewardsBadge } from '@components/MaxRewardsBadge';
+import { Spinner } from '@components/Spinner';
 import { mapCanisterError } from '@utils/errors';
 import { getNeuronDissolveDelaySeconds, getNeuronIsMaxDissolveDelay } from '@utils/neuron';
 import { errorNotification, successNotification } from '@utils/notification';
@@ -169,7 +170,7 @@ export function NeuronDetailIncreaseDelayView({
       >
         {isPending ? (
           <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Spinner className="mr-2" />
             {t(($) => $.neuronDetailModal.increaseDelay.confirming)}
           </>
         ) : (
diff --git a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseStakeView.tsx b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseStakeView.tsx
index da01f92e9..3d19de354 100644
--- a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseStakeView.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailIncreaseStakeView.tsx
@@ -1,6 +1,6 @@
 import type { NeuronInfo } from '@icp-sdk/canisters/nns';
 import { nonNullish } from '@dfinity/utils';
-import { AlertTriangle, Info, Loader2 } from 'lucide-react';
+import { AlertTriangle, Info } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -12,6 +12,7 @@ import { Alert, AlertDescription } from '@components/Alert';
 import { AmountInput } from '@components/AmountInput';
 import { Button } from '@components/button';
 import { Label } from '@components/Label';
+import { Spinner } from '@components/Spinner';
 import { CANISTER_ID_ICP_LEDGER } from '@constants/canisterIds';
 import { E8Sn, ICP_TRANSACTION_FEE } from '@constants/extra';
 import { useIcpLedgerAccountBalance } from '@hooks/icpLedger';
@@ -204,7 +205,7 @@ export function NeuronDetailIncreaseStakeView({ neuron, onSuccess, onProcessingC
       >
         {isPending ? (
           <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Spinner className="mr-2" />
             {t(($) => $.neuronDetailModal.increaseStake.confirming)}
           </>
         ) : (
diff --git a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailMaturityModeView.tsx b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailMaturityModeView.tsx
index 6025f1cdb..3cc6601c6 100644
--- a/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailMaturityModeView.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/neuronDetail/NeuronDetailMaturityModeView.tsx
@@ -1,5 +1,5 @@
 import type { NeuronInfo } from '@icp-sdk/canisters/nns';
-import { Info, Key, Loader2 } from 'lucide-react';
+import { Info, Key } from 'lucide-react';
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -7,6 +7,7 @@ import { Alert, AlertDescription } from '@components/Alert';
 import { Button } from '@components/button';
 import { MaxRewardsBadge } from '@components/MaxRewardsBadge';
 import { SegmentedToggle, type SegmentedToggleValue } from '@components/SegmentedToggle';
+import { Spinner } from '@components/Spinner';
 import { mapCanisterError } from '@utils/errors';
 import { getNeuronIsAutoStakingMaturity } from '@utils/neuron';
 import { errorNotification, successNotification } from '@utils/notification';
@@ -127,7 +128,7 @@ export function NeuronDetailMaturityModeView({
       >
         {isPending ? (
           <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            <Spinner className="mr-2" />
             {t(($) => $.neuronDetailModal.maturityMode.confirming)}
           </>
         ) : (
diff --git a/src/governance-app-frontend/src/features/stakes/components/stakingWizard/StakingWizardStepConfirmation.tsx b/src/governance-app-frontend/src/features/stakes/components/stakingWizard/StakingWizardStepConfirmation.tsx
index e946933c7..3c99185e9 100644
--- a/src/governance-app-frontend/src/features/stakes/components/stakingWizard/StakingWizardStepConfirmation.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/stakingWizard/StakingWizardStepConfirmation.tsx
@@ -1,9 +1,10 @@
-import { AlertTriangle, Loader } from 'lucide-react';
+import { AlertTriangle } from 'lucide-react';
 import { motion } from 'motion/react';
 import { useTranslation } from 'react-i18next';
 
 import { AnimatedCheckmark } from '@components/AnimatedCheckmark';
 import { Button } from '@components/button';
+import { ProcessingSpinner } from '@components/ProcessingSpinner';
 
 import { STAKING_WIZARD_DISSOLVE_DELAY_OPTIONS } from './constants';
 import { StakingWizardCreateNeuronStep, StakingWizardFormState } from './types';
@@ -54,7 +55,7 @@ export function StakingWizardStepConfirmation({
         className="flex flex-col items-center gap-6 text-center"
         data-testid="staking-wizard-processing"
       >
-        <AnimatedLoader />
+        <ProcessingSpinner />
         <div>
           <p className="mb-3 text-lg font-semibold">
             {t(($) => $.stakeWizardModal.steps.confirmation.processing.title)}
@@ -161,19 +162,6 @@ export function StakingWizardStepConfirmation({
   );
 }
 
-function AnimatedLoader() {
-  return (
-    <motion.div
-      className="flex size-20 items-center justify-center rounded-full bg-green-600/10"
-      initial={{ scale: 0.8, opacity: 0 }}
-      animate={{ scale: 1, opacity: 1 }}
-      transition={{ duration: 0.3 }}
-    >
-      <Loader className="size-10 animate-spin text-green-600" />
-    </motion.div>
-  );
-}
-
 function AnimatedErrorIcon() {
   return (
     <motion.div
diff --git a/src/governance-app-frontend/src/features/stakes/components/summaryCards/CapitalCard.tsx b/src/governance-app-frontend/src/features/stakes/components/summaryCards/CapitalCard.tsx
index ecc22e392..bb5891be7 100644
--- a/src/governance-app-frontend/src/features/stakes/components/summaryCards/CapitalCard.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/summaryCards/CapitalCard.tsx
@@ -30,19 +30,18 @@ export function CapitalCard({ neurons }: CapitalCardProps) {
         <p className="mb-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
           {t(($) => $.neuron.summary.capital)}
         </p>
-        {tickersQuery.isLoading ? (
-          <>
-            <Skeleton className="mb-2 h-8 w-32" />
-            <Skeleton className="h-4 w-20" />
-          </>
-        ) : (
-          <>
-            <p className="text-lg font-semibold text-foreground md:text-2xl">
-              <SensitiveValue>
-                {t(($) => $.common.inIcp, { value: formatNumber(totalStaked) })}
-              </SensitiveValue>
-            </p>
-            <p className="mt-1 text-sm text-muted-foreground">
+        {/* The staked total arrives with the neurons, so it never waits on the
+            ticker price. Only the USD line below does. */}
+        <p className="text-lg font-semibold text-foreground md:text-2xl">
+          <SensitiveValue>
+            {t(($) => $.common.inIcp, { value: formatNumber(totalStaked) })}
+          </SensitiveValue>
+        </p>
+        <div className="mt-1 text-sm text-muted-foreground">
+          {tickersQuery.isLoading ? (
+            <Skeleton className="h-5 w-20" />
+          ) : (
+            <p>
               {nonNullish(usdValue) ? (
                 <SensitiveValue size="sm">
                   {t(($) => $.account.approxUsd, {
@@ -53,8 +52,8 @@ export function CapitalCard({ neurons }: CapitalCardProps) {
                 '—'
               )}
             </p>
-          </>
-        )}
+          )}
+        </div>
       </CardContent>
     </Card>
   );
diff --git a/src/governance-app-frontend/src/features/stakes/components/summaryCards/EarningsCard.tsx b/src/governance-app-frontend/src/features/stakes/components/summaryCards/EarningsCard.tsx
index 629f00638..b85a1bfed 100644
--- a/src/governance-app-frontend/src/features/stakes/components/summaryCards/EarningsCard.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/summaryCards/EarningsCard.tsx
@@ -53,7 +53,7 @@ export function EarningsCard({ neurons }: EarningsCardProps) {
           ) : stakingRewardsError ? (
             <p>—</p>
           ) : (
-            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-5 w-24" />
           )}
         </div>
       </CardContent>
diff --git a/src/governance-app-frontend/src/features/stakes/components/summaryCards/EngagementCard.tsx b/src/governance-app-frontend/src/features/stakes/components/summaryCards/EngagementCard.tsx
index fb3262c24..363f48929 100644
--- a/src/governance-app-frontend/src/features/stakes/components/summaryCards/EngagementCard.tsx
+++ b/src/governance-app-frontend/src/features/stakes/components/summaryCards/EngagementCard.tsx
@@ -38,8 +38,8 @@ export function EngagementCard({ neurons }: EngagementCardProps) {
         </Tooltip>
         {isLoading ? (
           <>
-            <Skeleton className="mb-2 h-8 w-32" />
-            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-7 w-32 md:h-8" />
+            <Skeleton className="mt-1 h-5 w-20" />
           </>
         ) : (
           <>
diff --git a/src/governance-app-frontend/src/features/transactions/components/TransactionListDialog.tsx b/src/governance-app-frontend/src/features/transactions/components/TransactionListDialog.tsx
index 9482e57eb..48f2cd080 100644
--- a/src/governance-app-frontend/src/features/transactions/components/TransactionListDialog.tsx
+++ b/src/governance-app-frontend/src/features/transactions/components/TransactionListDialog.tsx
@@ -8,7 +8,6 @@ import { useNeuronAccountsIds } from '@features/account/hooks/useNeuronAccountsI
 import { buildTrustedAddresses } from '@features/account/utils/addressPoisoning';
 import { useAccounts } from '@features/accounts/hooks/useAccounts';
 
-import { MultipleSkeletons } from '@components/MultipleSkeletons';
 import { QueryStates } from '@components/QueryStates';
 import {
   ResponsiveDialog,
@@ -17,6 +16,7 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
 } from '@components/ResponsiveDialog';
+import { SkeletonTransactionList } from '@components/skeletons/SkeletonTransactionList';
 import { useAddressBook } from '@hooks/addressBook/useAddressBook';
 import { useIcpIndexTransactions } from '@hooks/icpIndex/useIcpIndexTransactions';
 import { CertifiedData } from '@typings/queries';
@@ -93,15 +93,13 @@ export function TransactionListDialog({
         </ResponsiveDialogHeader>
 
         {isNullish(accountIdHex) ? (
-          <div className="flex flex-col gap-2">
-            <MultipleSkeletons count={3} />
-          </div>
+          <SkeletonTransactionList />
         ) : (
           <div className="flex flex-col gap-2 pb-2 lg:pb-0">
             <QueryStates<CertifiedData<IcpIndexDid.GetAccountIdentifierTransactionsResponse>>
               infiniteQuery={transactions}
               isEmpty={(data) => !data.pages?.length || !data.pages[0].response.transactions.length}
-              loadingComponent={<MultipleSkeletons count={3} />}
+              loadingComponent={<SkeletonTransactionList />}
               emptyComponent={
                 <p className="py-8 text-center text-sm text-muted-foreground">
                   {t(($) => $.account.noTransactions)}
diff --git a/src/governance-app-frontend/src/features/voting/components/AdvancedFollowingModal.tsx b/src/governance-app-frontend/src/features/voting/components/AdvancedFollowingModal.tsx
index ebd07490e..ccba35203 100644
--- a/src/governance-app-frontend/src/features/voting/components/AdvancedFollowingModal.tsx
+++ b/src/governance-app-frontend/src/features/voting/components/AdvancedFollowingModal.tsx
@@ -1,6 +1,6 @@
 import { type NeuronInfo, Topic } from '@icp-sdk/canisters/nns';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { AlertTriangle, Loader2, Plus } from 'lucide-react';
+import { AlertTriangle, Plus } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +16,8 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
 } from '@components/ResponsiveDialog';
-import { Skeleton } from '@components/Skeleton';
+import { SkeletonTopicRows } from '@components/skeletons/SkeletonListRows';
+import { Spinner } from '@components/Spinner';
 import { useGovernanceNeurons, useNnsGovernance } from '@hooks/governance';
 import { useGovernanceKnownNeurons } from '@hooks/governance/useGovernanceKnownNeurons';
 import { errorMessage } from '@utils/error';
@@ -77,17 +78,7 @@ export function AdvancedFollowingModal({ open, onOpenChange }: Props) {
           </ResponsiveDialogHeader>
 
           {isLoading ? (
-            <div className="flex flex-col gap-4 py-4">
-              {[1, 2, 3].map((i) => (
-                <div key={i} className="flex items-center justify-between px-4">
-                  <div className="flex items-center gap-3">
-                    <Skeleton className="size-4 rounded-full" />
-                    <Skeleton className="h-4 w-32" />
-                  </div>
-                  <Skeleton className="h-4 w-20" />
-                </div>
-              ))}
-            </div>
+            <SkeletonTopicRows />
           ) : (
             <>
               <div className={cn('mt-2 mb-4', isWaitingForCertifiedData && 'animate-pulse')}>
@@ -101,11 +92,7 @@ export function AdvancedFollowingModal({ open, onOpenChange }: Props) {
                   }}
                   data-testid="set-followees-btn"
                 >
-                  {isWaitingForCertifiedData ? (
-                    <Loader2 className="size-4 animate-spin" />
-                  ) : (
-                    <Plus className="size-4" />
-                  )}
+                  {isWaitingForCertifiedData ? <Spinner /> : <Plus className="size-4" />}
                   {isWaitingForCertifiedData
                     ? t(($) => $.voting.manageFollowing.certifying)
                     : t(($) => $.voting.manageFollowing.setFollowees)}
diff --git a/src/governance-app-frontend/src/features/voting/components/FollowedNeuronCard.tsx b/src/governance-app-frontend/src/features/voting/components/FollowedNeuronCard.tsx
index debd41496..6af583902 100644
--- a/src/governance-app-frontend/src/features/voting/components/FollowedNeuronCard.tsx
+++ b/src/governance-app-frontend/src/features/voting/components/FollowedNeuronCard.tsx
@@ -72,7 +72,7 @@ export const FollowedNeuronCard = ({ neuron }: Props) => {
           <div className="flex shrink-0 items-center justify-center rounded-md bg-muted p-2">
             <CheckCircle2 className="size-5 text-muted-foreground" />
           </div>
-          {knownNeuronsQuery.isLoading ? <Skeleton className="h-6 w-40" /> : renderContent()}
+          {knownNeuronsQuery.isLoading ? <Skeleton className="h-6 w-48" /> : renderContent()}
         </div>
 
         <Button variant="outline" size="sm" asChild>
diff --git a/src/governance-app-frontend/src/features/voting/components/FolloweePicker.tsx b/src/governance-app-frontend/src/features/voting/components/FolloweePicker.tsx
index 959cc5ba5..b18b0de54 100644
--- a/src/governance-app-frontend/src/features/voting/components/FolloweePicker.tsx
+++ b/src/governance-app-frontend/src/features/voting/components/FolloweePicker.tsx
@@ -29,7 +29,7 @@ import {
   MutationDialogHeader,
 } from '@components/MutationDialog';
 import { ResponsiveDialogDescription, ResponsiveDialogTitle } from '@components/ResponsiveDialog';
-import { Skeleton } from '@components/Skeleton';
+import { SkeletonPickerRows } from '@components/skeletons/SkeletonListRows';
 import { DIALOG_RESET_DELAY_MS } from '@constants/extra';
 import { useGovernanceNeurons, useNnsGovernance } from '@hooks/governance';
 import { useGovernanceKnownNeurons } from '@hooks/governance/useGovernanceKnownNeurons';
@@ -344,14 +344,7 @@ function StepSelectNeurons({
       <div ref={scrollRef} className="flex-1 overflow-y-auto rounded-lg border">
         <div className="flex flex-col divide-y">
           {isLoading ? (
-            <div className="flex flex-col gap-3 p-3">
-              {[1, 2, 3].map((i) => (
-                <div key={i} className="flex items-center gap-4 p-4">
-                  <Skeleton className="size-6 rounded" />
-                  <Skeleton className="h-5 w-48" />
-                </div>
-              ))}
-            </div>
+            <SkeletonPickerRows />
           ) : knownNeurons.length === 0 && customNeuronIds.size === 0 ? (
             <p className="py-4 text-center text-sm text-muted-foreground">
               {t(($) => $.voting.picker.noResults)}
diff --git a/src/governance-app-frontend/src/features/voting/components/KnownNeuronCard.tsx b/src/governance-app-frontend/src/features/voting/components/KnownNeuronCard.tsx
index 01ea2ae89..4b254ce6c 100644
--- a/src/governance-app-frontend/src/features/voting/components/KnownNeuronCard.tsx
+++ b/src/governance-app-frontend/src/features/voting/components/KnownNeuronCard.tsx
@@ -7,7 +7,6 @@ import {
   Circle,
   CircleDot,
   LinkIcon,
-  Loader2,
   Square,
 } from 'lucide-react';
 import { useState } from 'react';
@@ -18,6 +17,7 @@ import { Badge } from '@components/badge';
 import { Button } from '@components/button';
 import { Card } from '@components/Card';
 import { MarkdownRenderer } from '@components/MarkdownRenderer';
+import { Spinner } from '@components/Spinner';
 import { DASHBOARD_URL } from '@constants/extra';
 import { cn } from '@utils/shadcn';
 import { safeParseUrl } from '@utils/urls';
@@ -68,7 +68,7 @@ export const KnownNeuronCard = ({
       <div className="flex gap-4">
         <div className="flex h-14 shrink-0 items-center pl-5">
           {isLoading ? (
-            <Loader2 className="size-6 animate-spin" />
+            <Spinner className="size-6" />
           ) : mode === 'checkbox' ? (
             isSelected ? (
               <CheckSquare2 className="size-6 text-primary" />
diff --git a/src/governance-app-frontend/src/features/voting/components/SimpleFollowingModal.tsx b/src/governance-app-frontend/src/features/voting/components/SimpleFollowingModal.tsx
index 9dc3e7b09..23cd94a74 100644
--- a/src/governance-app-frontend/src/features/voting/components/SimpleFollowingModal.tsx
+++ b/src/governance-app-frontend/src/features/voting/components/SimpleFollowingModal.tsx
@@ -17,7 +17,7 @@ import {
   MutationDialogHeader,
 } from '@components/MutationDialog';
 import { ResponsiveDialogDescription, ResponsiveDialogTitle } from '@components/ResponsiveDialog';
-import { Skeleton } from '@components/Skeleton';
+import { SkeletonPickerRows } from '@components/skeletons/SkeletonListRows';
 import { DIALOG_RESET_DELAY_MS } from '@constants/extra';
 import { useGovernanceNeurons, useNnsGovernance } from '@hooks/governance';
 import { useGovernanceKnownNeurons } from '@hooks/governance/useGovernanceKnownNeurons';
@@ -242,14 +242,7 @@ export function SimpleFollowingModal({ open, onOpenChange }: Props) {
               >
                 <div className="flex flex-col divide-y">
                   {knownNeuronsQuery.isLoading ? (
-                    <div className="flex flex-col gap-3 p-3">
-                      {[1, 2, 3].map((i) => (
-                        <div key={i} className="flex items-center gap-4 p-4">
-                          <Skeleton className="size-6 rounded" />
-                          <Skeleton className="h-5 w-48" />
-                        </div>
-                      ))}
-                    </div>
+                    <SkeletonPickerRows />
                   ) : knownNeuronsQuery.isError ? (
                     <p className="py-4 text-center text-destructive">
                       {t(($) => $.common.loadingError)}
diff --git a/src/governance-app-frontend/src/features/voting/components/VotingOverviewAdvanced.tsx b/src/governance-app-frontend/src/features/voting/components/VotingOverviewAdvanced.tsx
index 8d97674c6..4b6e34793 100644
--- a/src/governance-app-frontend/src/features/voting/components/VotingOverviewAdvanced.tsx
+++ b/src/governance-app-frontend/src/features/voting/components/VotingOverviewAdvanced.tsx
@@ -8,6 +8,8 @@ import { Card, CardContent } from '@components/Card';
 import { EmptyActionState } from '@components/EmptyActionState';
 import { PageHeader } from '@components/PageHeader';
 import { Skeleton } from '@components/Skeleton';
+import { SkeletonPageHeader } from '@components/skeletons/SkeletonPageHeader';
+import { SkeletonScreen } from '@components/skeletons/SkeletonScreen';
 
 import {
   getConfiguredTopicCount,
@@ -86,23 +88,22 @@ export function VotingOverviewAdvanced({
 
 function OverviewSkeleton() {
   return (
-    <div className="flex flex-col gap-3">
-      <Skeleton className="h-8 w-48" />
-      <Skeleton className="h-4 w-full max-w-md" />
-      <Card className="mt-2 p-0">
+    <SkeletonScreen className="flex flex-col gap-6">
+      <SkeletonPageHeader action={true} />
+      <Card className="p-0">
         <CardContent className="flex flex-col divide-y p-0">
-          {[1, 2, 3, 4].map((i) => (
-            <div key={i} className="flex items-center justify-between px-4 py-4">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div key={index} className="flex items-center justify-between px-4 py-4">
               <div className="flex items-center gap-3">
-                <Skeleton className="size-5 rounded-full" />
-                <Skeleton className="h-4 w-32" />
+                <Skeleton className="size-5 shrink-0 rounded-full" />
+                <Skeleton className="h-5 w-32" />
               </div>
-              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-5 w-24" />
             </div>
           ))}
         </CardContent>
       </Card>
-    </div>
+    </SkeletonScreen>
   );
 }
 
diff --git a/src/governance-app-frontend/src/features/voting/components/VotingOverviewSimple.tsx b/src/governance-app-frontend/src/features/voting/components/VotingOverviewSimple.tsx
index 1cff4aeb6..bb476964d 100644
--- a/src/governance-app-frontend/src/features/voting/components/VotingOverviewSimple.tsx
+++ b/src/governance-app-frontend/src/features/voting/components/VotingOverviewSimple.tsx
@@ -5,9 +5,12 @@ import { useTranslation } from 'react-i18next';
 
 import { Alert, AlertDescription, AlertTitle } from '@components/Alert';
 import { Button } from '@components/button';
+import { Card, CardContent } from '@components/Card';
 import { EmptyActionState } from '@components/EmptyActionState';
 import { PageHeader } from '@components/PageHeader';
 import { Skeleton } from '@components/Skeleton';
+import { SkeletonPageHeader } from '@components/skeletons/SkeletonPageHeader';
+import { SkeletonScreen } from '@components/skeletons/SkeletonScreen';
 
 import { hasComplexFollowing } from '../utils/topicFollowing';
 import { FollowedNeuronCard } from './FollowedNeuronCard';
@@ -29,11 +32,18 @@ export function VotingOverviewSimple({
 
   if (isLoading) {
     return (
-      <div className="flex flex-col gap-3">
-        <Skeleton className="h-16 w-full" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-full" />
-      </div>
+      <SkeletonScreen className="flex flex-col gap-6">
+        <SkeletonPageHeader action={true} />
+        <Card className="p-0">
+          <CardContent className="flex items-center justify-between gap-4 p-4">
+            <div className="flex items-center gap-3">
+              <Skeleton className="size-9 rounded-md" />
+              <Skeleton className="h-6 w-48" />
+            </div>
+            <Skeleton className="h-8 w-36" />
+          </CardContent>
+        </Card>
+      </SkeletonScreen>
     );
   }
 
diff --git a/src/governance-app-frontend/src/routes/_auth/accounts/index.tsx b/src/governance-app-frontend/src/routes/_auth/accounts/index.tsx
index e114132c1..149b5d932 100644
--- a/src/governance-app-frontend/src/routes/_auth/accounts/index.tsx
+++ b/src/governance-app-frontend/src/routes/_auth/accounts/index.tsx
@@ -7,12 +7,14 @@ import { CreateSubAccountDialog } from '@features/accounts/components/CreateSubA
 import { RecentTransactions } from '@features/accounts/components/RecentTransactions';
 
 import { PageHeader } from '@components/PageHeader';
+import { AccountsSkeleton } from '@components/skeletons/AccountsSkeleton';
 import { readFromStorage as readAdvancedFeaturesFromStorage } from '@hooks/useAdvancedFeatures';
 
 import i18n from '@/i18n/config';
 
 export const Route = createFileRoute('/_auth/accounts/')({
   component: AccountsPage,
+  pendingComponent: AccountsSkeleton,
   beforeLoad: () => {
     const features = readAdvancedFeaturesFromStorage();
 
diff --git a/src/governance-app-frontend/src/routes/_auth/dashboard/index.tsx b/src/governance-app-frontend/src/routes/_auth/dashboard/index.tsx
index 0fe701f55..9c12f0020 100644
--- a/src/governance-app-frontend/src/routes/_auth/dashboard/index.tsx
+++ b/src/governance-app-frontend/src/routes/_auth/dashboard/index.tsx
@@ -14,6 +14,7 @@ import { TotalAssetsCard } from '@features/dashboard/components/TotalAssetsCard'
 import { TotalStakedCard } from '@features/dashboard/components/TotalStakedCard';
 import { StakedCard } from '@features/stakes/components/StakedCard';
 
+import { DashboardSkeleton } from '@components/skeletons/DashboardSkeleton';
 import { useAdvancedFeatures } from '@hooks/useAdvancedFeatures';
 import { prefetchDashboardRoute } from '@common/queries/routeLoaders';
 
@@ -28,6 +29,7 @@ export const Route = createFileRoute('/_auth/dashboard/')({
     depositModal: search.depositModal === 'true' || search.depositModal === true ? true : undefined,
   }),
   loader: ({ context }) => prefetchDashboardRoute(context.queryClient),
+  pendingComponent: DashboardSkeleton,
   // Entry only — `?depositModal` toggles must not rerun the loader.
   staleTime: Infinity,
   component: Dashboard,
diff --git a/src/governance-app-frontend/src/routes/_auth/neurons/index.tsx b/src/governance-app-frontend/src/routes/_auth/neurons/index.tsx
index 405061881..24d4de619 100644
--- a/src/governance-app-frontend/src/routes/_auth/neurons/index.tsx
+++ b/src/governance-app-frontend/src/routes/_auth/neurons/index.tsx
@@ -18,6 +18,7 @@ import {
 import { Button } from '@components/button';
 import { PageHeader } from '@components/PageHeader';
 import { QueryStates } from '@components/QueryStates';
+import { NeuronsContentSkeleton, NeuronsSkeleton } from '@components/skeletons/NeuronsSkeleton';
 import { E8Sn, ICP_TRANSACTION_FEE } from '@constants/extra';
 import { useGovernanceNeurons } from '@hooks/governance';
 import { useIcpLedgerAccountBalance } from '@hooks/icpLedger';
@@ -41,6 +42,7 @@ export const Route = createFileRoute('/_auth/neurons/')({
     openWizard: search.openWizard === 'true' || search.openWizard === true ? true : undefined,
   }),
   loader: ({ context }) => prefetchNeuronsRoute(context.queryClient),
+  pendingComponent: NeuronsSkeleton,
   // The loader warms the cache on entry and nothing more. Without this the
   // router reruns it on every navigation to the route, which here means every
   // `?openWizard`/`?neuronId` toggle — modal state lives in the search params.
@@ -123,6 +125,7 @@ function NeuronsComponent() {
         query={neuronsQuery}
         isEmpty={(neurons) => neurons.response.length === 0}
         emptyComponent={<EmptyNeuronsState openStakingWizard={handleOpenStakingWizard} />}
+        loadingComponent={<NeuronsContentSkeleton />}
       >
         {(neurons) => (
           <>
diff --git a/src/governance-app-frontend/src/routes/_auth/settings/index.tsx b/src/governance-app-frontend/src/routes/_auth/settings/index.tsx
index 3814a060f..12568ce6c 100644
--- a/src/governance-app-frontend/src/routes/_auth/settings/index.tsx
+++ b/src/governance-app-frontend/src/routes/_auth/settings/index.tsx
@@ -19,6 +19,7 @@ import { ThemeCard } from '@features/userAccount/components/ThemeCard';
 import { Button } from '@components/button';
 import { Card } from '@components/Card';
 import { PageHeader } from '@components/PageHeader';
+import { SettingsSkeleton } from '@components/skeletons/SettingsSkeleton';
 import { BUILD_DATE, GIT_COMMIT } from '@constants/extra';
 import { useLogout } from '@hooks/useLogout';
 import { useSessionTimeLeft } from '@hooks/useSessionTimeLeft';
@@ -36,6 +37,7 @@ export const Route = createFileRoute('/_auth/settings/')({
       search.openAddressBook === 'true' || search.openAddressBook === true ? true : undefined,
   }),
   component: Settings,
+  pendingComponent: SettingsSkeleton,
   head: () => {
     const title = i18n.t(($) => $.common.head.settings.title);
 
diff --git a/src/governance-app-frontend/src/routes/_auth/voting/index.tsx b/src/governance-app-frontend/src/routes/_auth/voting/index.tsx
index 5950b5297..0fa2adefe 100644
--- a/src/governance-app-frontend/src/routes/_auth/voting/index.tsx
+++ b/src/governance-app-frontend/src/routes/_auth/voting/index.tsx
@@ -23,11 +23,11 @@ import {
 
 import { Alert, AlertDescription, AlertTitle } from '@components/Alert';
 import { Button } from '@components/button';
-import { Card } from '@components/Card';
 import { InViewSentinel } from '@components/InViewSentinel';
-import { MultipleSkeletons } from '@components/MultipleSkeletons';
 import { QueryStates } from '@components/QueryStates';
 import { Separator } from '@components/Separator';
+import { ProposalListSkeleton } from '@components/skeletons/ProposalListSkeleton';
+import { VotingSkeleton } from '@components/skeletons/VotingSkeleton';
 import { ToggleGroup, ToggleGroupItem } from '@components/ToggleGroup';
 import { DIALOG_RESET_DELAY_MS } from '@constants/extra';
 import { useGovernanceNeurons, useGovernanceProposals } from '@hooks/governance';
@@ -67,7 +67,7 @@ export const Route = createFileRoute('/_auth/voting/')({
     prefetchVotingRoute(context.queryClient, { proposals: proposalsToPrefetch(deps) }),
   staleTime: Infinity,
   component: Voting,
-  pendingComponent: () => <MultipleSkeletons count={3} />,
+  pendingComponent: VotingSkeleton,
   head: () => {
     const title = i18n.t(($) => $.common.head.voting.title);
 
@@ -245,19 +245,7 @@ function Voting() {
                 )}
               </p>
             }
-            loadingComponent={
-              <div className="flex flex-col gap-4">
-                <Card>
-                  <MultipleSkeletons count={3} />
-                </Card>
-                <Card>
-                  <MultipleSkeletons count={3} />
-                </Card>
-                <Card>
-                  <MultipleSkeletons count={3} />
-                </Card>
-              </div>
-            }
+            loadingComponent={<ProposalListSkeleton />}
           >
             {(data) => (
               <>
@@ -303,8 +291,7 @@ function Voting() {
 
                 {activeQuery.hasNextPage && (
                   <InViewSentinel retrigger={data} callback={activeQuery.fetchNextPage}>
-                    {/* @TODO: Update skeleton loader to match list item */}
-                    <MultipleSkeletons count={3} />
+                    <ProposalListSkeleton count={2} />
                   </InViewSentinel>
                 )}
               </>
diff --git a/src/governance-app-frontend/src/routes/_auth/voting/proposals/$id/index.tsx b/src/governance-app-frontend/src/routes/_auth/voting/proposals/$id/index.tsx
index 99e379cd4..fc8554f0f 100644
--- a/src/governance-app-frontend/src/routes/_auth/voting/proposals/$id/index.tsx
+++ b/src/governance-app-frontend/src/routes/_auth/voting/proposals/$id/index.tsx
@@ -20,8 +20,11 @@ import { Card, CardContent, CardHeader, CardTitle } from '@components/Card';
 import { CertifiedBadge } from '@components/CertifiedBadge';
 import { EmptyMessage } from '@components/EmptyMessage';
 import { MarkdownRenderer } from '@components/MarkdownRenderer';
-import { MultipleSkeletons } from '@components/MultipleSkeletons';
 import { QueryStates } from '@components/QueryStates';
+import {
+  ProposalDetailContentSkeleton,
+  ProposalDetailSkeleton,
+} from '@components/skeletons/ProposalDetailSkeleton';
 import { useGovernanceProposal } from '@hooks/governance/useGovernanceProposal';
 import { CheckResultKey, useSpamCheck } from '@hooks/spamFilter';
 import { CertifiedData } from '@typings/queries';
@@ -41,7 +44,7 @@ export const Route = createFileRoute('/_auth/voting/proposals/$id/')({
   beforeLoad: async ({ params }) => {
     if (!isValidProposalId(params.id)) throw redirect({ to: '/voting', replace: true });
   },
-  pendingComponent: () => <MultipleSkeletons count={3} />,
+  pendingComponent: ProposalDetailSkeleton,
   component: ProposalDetailsRouteComponent,
 
   head: ({ params }) => {
@@ -87,6 +90,7 @@ function ProposalDetailsRouteComponent() {
         emptyComponent={
           <EmptyMessage message={t(($) => $.proposal.notFound, { id: id?.toString() ?? '' })} />
         }
+        loadingComponent={<ProposalDetailContentSkeleton />}
       >
         {({ response: proposal }) => {
           if (!nonNullish(proposal)) return null;