feat(loading): add content-shaped skeletons for every route

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>
+);

src/governance-app-frontend/src/common/components/skeletons/DashboardSkeleton.tsx

@@ -0,0 +1,132 @@
+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 `AccountCard`: header action, balance, then the two stacked actions. */
+const SkeletonDashboardAccountCard = () => (
+  <Card className="pt-4 pb-6">
+    <CardHeader className="flex flex-col gap-0">
+      <div className="flex min-h-9 w-full items-center justify-between">
+        <Skeleton className="h-5 w-24" />
+        <Skeleton className="size-9 rounded-md" />
+      </div>
+      <div className="flex flex-col gap-0.5">
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-5 w-20" />
+      </div>
+    </CardHeader>
+    <CardContent className="flex flex-1 flex-col justify-between gap-6">
+      <div className="mt-auto flex flex-col gap-3">
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    </CardContent>
+  </Card>
+);
+
+/** Mirrors `AccountsCard` while it loads: count, balance, two preview rows, action. */
+const SkeletonDashboardAccountsCard = () => (
+  <Card className="pt-4 pb-6">
+    <CardHeader className="flex flex-col gap-0">
+      <div className="flex min-h-9 items-center gap-2">
+        <Skeleton className="h-5 w-24" />
+        <Skeleton className="size-5 rounded-full" />
+      </div>
+      <div className="flex flex-col gap-0.5">
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-5 w-20" />
+      </div>
+    </CardHeader>
+    <CardContent className="flex flex-1 flex-col justify-between gap-6">
+      <div className="flex flex-col divide-y">
+        {Array.from({ length: 2 }).map((_, index) => (
+          <div key={index} className="flex items-center justify-between py-2.5">
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-5 w-20" />
+          </div>
+        ))}
+      </div>
+      <div className="mt-auto">
+        <Skeleton className="h-12 w-full" />
+      </div>
+    </CardContent>
+  </Card>
+);
+
+type Props = {
+  /** Mirrors the subaccounts feature, which swaps `AccountCard` for `AccountsCard`. */
+  subaccounts?: boolean;
+};
+
+/** Mirrors the `/dashboard` layout, so the real page lands in the same frame. */
+export const DashboardSkeleton = ({ subaccounts = false }: Props) => (
+  <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>
+
+      {subaccounts ? <SkeletonDashboardAccountsCard /> : <SkeletonDashboardAccountCard />}
+
+      {/* 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>
+);

src/governance-app-frontend/src/common/components/skeletons/NeuronsSkeleton.tsx

@@ -0,0 +1,59 @@
+import { Card, CardContent, CardHeader } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonPageHeader } from './SkeletonPageHeader';
+import { SkeletonScreen } from './SkeletonScreen';
+import { SkeletonStatCard } from './SkeletonStatCard';
+
+/** Mirrors `NeuronCard`: amount, APY badge, and the six label/value rows. */
+const SkeletonNeuronCard = () => (
+  <Card className="flex h-full flex-col gap-3">
+    <CardHeader className="flex flex-row items-start justify-between space-y-0">
+      <div className="flex min-w-0 flex-col gap-1">
+        <Skeleton className="h-9 w-40 max-w-full" />
+        <Skeleton className="h-5 w-20" />
+      </div>
+      <Skeleton className="h-9 w-16 shrink-0 rounded-sm" />
+    </CardHeader>
+    <CardContent className="flex-1">
+      <div className="flex flex-col divide-y divide-border/50">
+        {Array.from({ length: 6 }).map((_, index) => (
+          <div key={index} className="flex items-center justify-between gap-4 py-3">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-5.5 w-20" />
+          </div>
+        ))}
+      </div>
+    </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>
+);

src/governance-app-frontend/src/common/components/skeletons/ProposalDetailSkeleton.tsx

@@ -0,0 +1,66 @@
+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 voting 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">
+    {/* Summary card: id, title, badges, then the Markdown summary. */}
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-5 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>
+        <SkeletonText lines={8} />
+      </CardContent>
+    </Card>
+
+    {/* ProposalDetailsVoting: vote bar, then the four totals. */}
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-32" />
+      </CardHeader>
+      <CardContent className="flex flex-col gap-6">
+        <div className="flex flex-col gap-1">
+          <div className="flex justify-between">
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-5 w-24" />
+          </div>
+          <Skeleton className="h-3 w-full rounded-full" />
+        </div>
+        <div className="grid grid-cols-1 gap-2 xs:grid-cols-2">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <div key={index} className="flex flex-col gap-1">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-6 w-28" />
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  </SkeletonScreen>
+);
+
+/** Mirrors a single proposal page: back link, summary card, voting card. */
+export const ProposalDetailSkeleton = () => (
+  <div className="flex flex-col gap-6">
+    <Skeleton className="h-5 w-40" />
+    <ProposalDetailContentSkeleton />
+  </div>
+);

src/governance-app-frontend/src/common/components/skeletons/ProposalListSkeleton.tsx

@@ -0,0 +1,51 @@
+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>
+);
+
+/** The proposal cards alone, for a parent that already announces the load. */
+export const SkeletonProposalCards = ({ count = 3 }: Props) => (
+  <div className="flex flex-col gap-4">
+    {Array.from({ length: count }).map((_, index) => (
+      <SkeletonProposalCard key={index} />
+    ))}
+  </div>
+);
+
+/** Stands in for the proposals list, in the page and in the infinite scroll. */
+export const ProposalListSkeleton = ({ count = 3 }: Props) => (
+  <SkeletonScreen>
+    <SkeletonProposalCards count={count} />
+  </SkeletonScreen>
+);