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

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

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

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

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

@@ -0,0 +1,76 @@
+import { Card } from '@components/Card';
+import { Skeleton } from '@components/Skeleton';
+
+import { SkeletonPageHeader } from './SkeletonPageHeader';
+import { SkeletonScreen } from './SkeletonScreen';
+
+const SkeletonHeading = ({ description = false }: { description?: boolean }) => (
+  <div className="space-y-2">
+    <Skeleton className="h-8 w-48" />
+    {description && <Skeleton className="h-5 w-80 max-w-full" />}
+  </div>
+);
+
+const SkeletonRows = ({ rows }: { rows: number }) => (
+  <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 gap-4 px-6 py-5">
+          <div className="flex min-w-0 flex-col gap-2">
+            <Skeleton className="h-5 w-40 max-w-full" />
+            <Skeleton className="h-4 w-64 max-w-full" />
+          </div>
+          <Skeleton className="h-8 w-16 shrink-0" />
+        </div>
+      ))}
+    </div>
+  </Card>
+);
+
+const SkeletonTextCard = () => (
+  <Card className="p-6">
+    <div className="flex flex-col gap-3">
+      <Skeleton className="h-5 w-40 max-w-full" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-3/5" />
+    </div>
+  </Card>
+);
+
+/**
+ * Mirrors the `/settings` sections in order: identity, address book, advanced
+ * features, governance, appearance, session, and the version footer.
+ */
+export const SettingsSkeleton = () => (
+  <SkeletonScreen className="flex min-h-full flex-col gap-12">
+    <SkeletonPageHeader />
+    <section className="flex flex-col gap-4">
+      <SkeletonHeading description />
+      <SkeletonRows rows={3} />
+    </section>
+    <section className="flex flex-col gap-4">
+      <SkeletonHeading />
+      <SkeletonRows rows={1} />
+    </section>
+    <section className="flex flex-col gap-4">
+      <SkeletonHeading />
+      <SkeletonRows rows={4} />
+    </section>
+    <section className="flex flex-col gap-4">
+      <SkeletonHeading />
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <SkeletonTextCard />
+        <SkeletonTextCard />
+      </div>
+    </section>
+    <section className="flex flex-col gap-4">
+      <SkeletonHeading />
+      <SkeletonRows rows={4} />
+    </section>
+    <section className="flex flex-col gap-4">
+      <SkeletonHeading description />
+      <Skeleton className="h-10 w-full sm:w-32" />
+    </section>
+    <Skeleton className="mt-auto h-4 w-32 self-center" />
+  </SkeletonScreen>
+);