diff --git a/src/App.tsx b/src/App.tsx
index e5f5916..51e55c7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,25 @@
+import { lazy, Suspense } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Header } from '@/components/Header';
 import { AutoSign } from '@/components/AutoSign';
 import { TelemetryBanner } from '@/components/TelemetryBanner';
-import Send from '@/pages/Send';
-import Receive from '@/pages/Receive';
-import Privacy from '@/pages/Privacy';
 import { HelpButton } from '@/components/HelpButton';
-import Vault from '@/pages/Vault';
-import Schedule from '@/pages/Schedule';
+import {
+  StellarSendSkeleton,
+  StellarReceiveSkeleton,
+  StellarWithdrawSkeleton,
+  StellarActivitySkeleton,
+  StellarSettingsSkeleton,
+} from '@/components/Skeletons';
+
+// Lazy-load every page so each Route gets its own Suspense boundary and the
+// correct skeleton is shown while the chunk is fetched/parsed.
+const Send = lazy(() => import('@/pages/Send'));
+const Receive = lazy(() => import('@/pages/Receive'));
+const Privacy = lazy(() => import('@/pages/Privacy'));
+const Vault = lazy(() => import('@/pages/Vault'));
+const Schedule = lazy(() => import('@/pages/Schedule'));
+const History = lazy(() => import('@/pages/History'));
 
 export function App() {
   return (
@@ -17,12 +29,63 @@ export function App() {
       <AutoSign />
       <main className="mx-auto w-full max-w-[720px] flex-1 px-4 pb-16 pt-8 sm:px-6 sm:pb-24 sm:pt-10">
         <Routes>
-          <Route path="/send" element={<Send />} />
-          <Route path="/receive" element={<Receive />} />
-          <Route path="/privacy" element={<Privacy />} />
-          <Route path="/vault" element={<Vault />} />
-          <Route path="/schedule" element={<Schedule />} />
-          <Route path="/pay" element={<Send />} />
+          <Route
+            path="/send"
+            element={
+              <Suspense fallback={<StellarSendSkeleton />}>
+                <Send />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/receive"
+            element={
+              <Suspense fallback={<StellarReceiveSkeleton />}>
+                <Receive />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/vault"
+            element={
+              <Suspense fallback={<StellarWithdrawSkeleton />}>
+                <Vault />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/history"
+            element={
+              <Suspense fallback={<StellarActivitySkeleton />}>
+                <History />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/schedule"
+            element={
+              <Suspense fallback={<StellarSettingsSkeleton />}>
+                <Schedule />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/privacy"
+            element={
+              <Suspense fallback={<StellarSendSkeleton />}>
+                <Privacy />
+              </Suspense>
+            }
+          />
+          {/* /pay is a payment-link entry point — reuses the Send chunk */}
+          <Route
+            path="/pay"
+            element={
+              <Suspense fallback={<StellarSendSkeleton />}>
+                <Send />
+              </Suspense>
+            }
+          />
           <Route path="*" element={<Navigate to="/send" replace />} />
         </Routes>
       </main>
diff --git a/src/components/Skeletons/SkeletonBlock.tsx b/src/components/Skeletons/SkeletonBlock.tsx
new file mode 100644
index 0000000..5887a8a
--- /dev/null
+++ b/src/components/Skeletons/SkeletonBlock.tsx
@@ -0,0 +1,25 @@
+/**
+ * SkeletonBlock – a single animated placeholder block.
+ *
+ * Uses a shimmer animation defined in index.css via the `animate-skeleton`
+ * Tailwind utility.  All dimensions are passed as Tailwind classes so callers
+ * control width/height while this component owns the animation, colour, and
+ * aria attributes.
+ */
+import type { HTMLAttributes } from 'react';
+
+interface SkeletonBlockProps extends HTMLAttributes<HTMLDivElement> {
+  /** Extra Tailwind classes, e.g. "w-32 h-4" */
+  className?: string;
+}
+
+export function SkeletonBlock({ className = '', ...rest }: SkeletonBlockProps) {
+  return (
+    <div
+      role="presentation"
+      aria-hidden="true"
+      className={`animate-skeleton bg-outline-variant/40 ${className}`}
+      {...rest}
+    />
+  );
+}
diff --git a/src/components/Skeletons/StellarActivitySkeleton.tsx b/src/components/Skeletons/StellarActivitySkeleton.tsx
new file mode 100644
index 0000000..bc1871c
--- /dev/null
+++ b/src/components/Skeletons/StellarActivitySkeleton.tsx
@@ -0,0 +1,66 @@
+/**
+ * StellarActivitySkeleton
+ *
+ * Mirrors the connected state of StellarHistory.
+ *
+ * Structure mirrors:
+ *   section.flex-col.gap-8
+ *     ├── header row  (chain badge + h1  ||  clear button)
+ *     ├── filter row  (Type select + Status select)
+ *     └── activity list (5 row placeholders)
+ *           each row: kind badge | address | amount | status chip
+ */
+import { SkeletonBlock } from './SkeletonBlock';
+
+export function StellarActivitySkeleton() {
+  return (
+    <section aria-label="Loading activity history" className="flex flex-col gap-8">
+      {/* ── Header row ── */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-2">
+          <SkeletonBlock className="h-3 w-40" />
+          <SkeletonBlock className="h-8 w-40" />
+        </div>
+        {/* Clear history button */}
+        <SkeletonBlock className="h-9 w-32" />
+      </div>
+
+      {/* ── Filter row ── */}
+      <div className="flex flex-wrap gap-4">
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-10" />
+          <SkeletonBlock className="h-9 w-36" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-14" />
+          <SkeletonBlock className="h-9 w-36" />
+        </div>
+      </div>
+
+      {/* ── Activity rows (5 placeholders) ── */}
+      <div className="flex flex-col gap-3">
+        {[0, 1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className="flex items-center justify-between border border-outline-variant p-4"
+          >
+            <div className="flex flex-col gap-2">
+              {/* kind badge */}
+              <SkeletonBlock className="h-4 w-28" />
+              {/* address */}
+              <SkeletonBlock className="h-3 w-48" />
+              {/* timestamp */}
+              <SkeletonBlock className="h-3 w-24" />
+            </div>
+            <div className="flex flex-col items-end gap-2">
+              {/* amount */}
+              <SkeletonBlock className="h-4 w-16" />
+              {/* status chip */}
+              <SkeletonBlock className="h-5 w-14" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Skeletons/StellarReceiveSkeleton.tsx b/src/components/Skeletons/StellarReceiveSkeleton.tsx
new file mode 100644
index 0000000..6d149b4
--- /dev/null
+++ b/src/components/Skeletons/StellarReceiveSkeleton.tsx
@@ -0,0 +1,70 @@
+/**
+ * StellarReceiveSkeleton
+ *
+ * Mirrors the "keys derived + scanning" state of StellarReceive / StellarReceiveView
+ * which is the most commonly loaded state (wallet already connected).
+ *
+ * Structure mirrors:
+ *   section.flex-col.gap-8
+ *     ├── header  (chain badge + h1 + subtitle)
+ *     ├── meta-address card (border box with label + truncated address + copy)
+ *     ├── registration card (border box)
+ *     ├── scan button
+ *     ├── search + filter row
+ *     └── match list placeholder (3 rows)
+ */
+import { SkeletonBlock } from './SkeletonBlock';
+
+export function StellarReceiveSkeleton() {
+  return (
+    <section aria-label="Loading receive page" className="flex flex-col gap-8">
+      {/* ── Header ── */}
+      <div className="flex flex-col gap-2">
+        <SkeletonBlock className="h-3 w-40" />
+        <SkeletonBlock className="h-8 w-28" />
+        <SkeletonBlock className="h-4 w-80" />
+      </div>
+
+      {/* ── Meta-address card ── */}
+      <div className="flex flex-col gap-3 border border-outline-variant bg-surface-container p-5">
+        <div className="flex items-center justify-between">
+          <SkeletonBlock className="h-3 w-36" />
+          {/* copy button placeholder */}
+          <SkeletonBlock className="h-6 w-6" />
+        </div>
+        {/* address value – two lines to match actual wrap */}
+        <SkeletonBlock className="h-4 w-full" />
+        <SkeletonBlock className="h-4 w-3/4" />
+      </div>
+
+      {/* ── Registration card ── */}
+      <div className="flex flex-col gap-3 border border-outline-variant bg-surface-container p-5">
+        <SkeletonBlock className="h-3 w-40" />
+        <SkeletonBlock className="h-10 w-full" />
+      </div>
+
+      {/* ── Scan button ── */}
+      <SkeletonBlock className="h-12 w-full" />
+
+      {/* ── Search + filter row ── */}
+      <div className="flex gap-3">
+        <SkeletonBlock className="h-9 flex-1" />
+        <SkeletonBlock className="h-9 w-24" />
+      </div>
+
+      {/* ── Match rows (3 placeholders) ── */}
+      <div className="flex flex-col gap-4">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="flex flex-col gap-2 border border-outline-variant p-4">
+            <div className="flex items-center justify-between">
+              <SkeletonBlock className="h-4 w-40" />
+              <SkeletonBlock className="h-4 w-16" />
+            </div>
+            <SkeletonBlock className="h-3 w-full" />
+            <SkeletonBlock className="h-3 w-2/3" />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Skeletons/StellarSendSkeleton.tsx b/src/components/Skeletons/StellarSendSkeleton.tsx
new file mode 100644
index 0000000..3c41185
--- /dev/null
+++ b/src/components/Skeletons/StellarSendSkeleton.tsx
@@ -0,0 +1,72 @@
+/**
+ * StellarSendSkeleton
+ *
+ * Placeholder that mirrors the visible layout of StellarSend / StellarSendView
+ * so the page never shifts when the real component mounts (CLS ≤ 0.05).
+ *
+ * Structure mirrors:
+ *   section.flex-col.gap-8
+ *     ├── header  (chain badge + h1)
+ *     ├── wallet-connect button
+ *     ├── form
+ *     │     ├── recipient field (label + input)
+ *     │     ├── asset selector row
+ *     │     ├── amount field (label + input + balance)
+ *     │     └── send button
+ *     └── simulation panel placeholder
+ */
+import { SkeletonBlock } from './SkeletonBlock';
+
+export function StellarSendSkeleton() {
+  return (
+    <section aria-label="Loading send page" className="flex flex-col gap-8">
+      {/* ── Header ── */}
+      <div className="flex flex-col gap-2">
+        {/* chain badge  */}
+        <SkeletonBlock className="h-3 w-40" />
+        {/* h1 */}
+        <SkeletonBlock className="h-8 w-24" />
+        {/* subtitle */}
+        <SkeletonBlock className="h-4 w-72" />
+      </div>
+
+      {/* ── Wallet-connect area ── */}
+      <SkeletonBlock className="h-10 w-full" />
+
+      {/* ── Form ── */}
+      <div className="flex flex-col gap-6">
+        {/* Recipient field */}
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-28" />
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* Asset selector row */}
+        <div className="flex items-center gap-2">
+          <SkeletonBlock className="h-10 w-28" />
+          <SkeletonBlock className="h-3 w-20" />
+        </div>
+
+        {/* Amount field */}
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <SkeletonBlock className="h-3 w-16" />
+            {/* balance */}
+            <SkeletonBlock className="h-3 w-24" />
+          </div>
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* Send button */}
+        <SkeletonBlock className="h-12 w-full" />
+      </div>
+
+      {/* ── Simulation panel ── */}
+      <div className="flex flex-col gap-2 border border-outline-variant p-4">
+        <SkeletonBlock className="h-3 w-32" />
+        <SkeletonBlock className="h-3 w-48" />
+        <SkeletonBlock className="h-3 w-40" />
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Skeletons/StellarSettingsSkeleton.tsx b/src/components/Skeletons/StellarSettingsSkeleton.tsx
new file mode 100644
index 0000000..b427334
--- /dev/null
+++ b/src/components/Skeletons/StellarSettingsSkeleton.tsx
@@ -0,0 +1,89 @@
+/**
+ * StellarSettingsSkeleton
+ *
+ * Mirrors the Schedule page layout (the closest "Settings"-like page in this
+ * app — recurring-payment configuration).
+ *
+ * Structure mirrors:
+ *   div.flex-col.gap-8
+ *     ├── header  (h1 + description)
+ *     ├── create form
+ *     │     ├── recipient input
+ *     │     ├── amount + asset row
+ *     │     ├── interval select
+ *     │     ├── end-date input
+ *     │     └── submit button
+ *     └── schedule list (3 row placeholders)
+ */
+import { SkeletonBlock } from './SkeletonBlock';
+
+export function StellarSettingsSkeleton() {
+  return (
+    <div aria-label="Loading schedule page" className="flex flex-col gap-8">
+      {/* ── Header ── */}
+      <header className="flex flex-col gap-3">
+        <SkeletonBlock className="h-8 w-32" />
+        <SkeletonBlock className="h-4 w-full max-w-lg" />
+        <SkeletonBlock className="h-4 w-3/4 max-w-md" />
+      </header>
+
+      {/* ── Create form ── */}
+      <div className="flex flex-col gap-5 border border-outline-variant p-6">
+        <SkeletonBlock className="h-4 w-40" />
+
+        {/* Recipient */}
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-20" />
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* Amount + asset row */}
+        <div className="flex gap-3">
+          <div className="flex flex-1 flex-col gap-1">
+            <SkeletonBlock className="h-3 w-16" />
+            <SkeletonBlock className="h-10 w-full" />
+          </div>
+          <div className="flex flex-col gap-1">
+            <SkeletonBlock className="h-3 w-12" />
+            <SkeletonBlock className="h-10 w-24" />
+          </div>
+        </div>
+
+        {/* Interval */}
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-16" />
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* End date */}
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-20" />
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* Submit */}
+        <SkeletonBlock className="h-12 w-full" />
+      </div>
+
+      {/* ── Schedule list (3 placeholders) ── */}
+      <div className="flex flex-col gap-4">
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            className="flex items-center justify-between border border-outline-variant p-4"
+          >
+            <div className="flex flex-col gap-2">
+              <SkeletonBlock className="h-4 w-32" />
+              <SkeletonBlock className="h-3 w-24" />
+              <SkeletonBlock className="h-3 w-40" />
+            </div>
+            <div className="flex gap-2">
+              <SkeletonBlock className="h-8 w-16" />
+              <SkeletonBlock className="h-8 w-16" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Skeletons/StellarWithdrawSkeleton.tsx b/src/components/Skeletons/StellarWithdrawSkeleton.tsx
new file mode 100644
index 0000000..63bf6ae
--- /dev/null
+++ b/src/components/Skeletons/StellarWithdrawSkeleton.tsx
@@ -0,0 +1,60 @@
+/**
+ * StellarWithdrawSkeleton
+ *
+ * Mirrors the connected state of StellarVault (deposit / claim / status tabs).
+ *
+ * Structure mirrors:
+ *   section.flex-col.gap-8
+ *     ├── header  (chain badge + h1 + subtitle)
+ *     ├── tab bar (3 tabs)
+ *     └── active tab content  (deposit form — the default tab)
+ *           ├── label + input  (unlock timestamp)
+ *           ├── label + input  (amount)
+ *           ├── label + input  (recipient)
+ *           └── submit button
+ */
+import { SkeletonBlock } from './SkeletonBlock';
+
+export function StellarWithdrawSkeleton() {
+  return (
+    <section aria-label="Loading vault page" className="flex flex-col gap-8">
+      {/* ── Header ── */}
+      <div className="flex flex-col gap-2">
+        <SkeletonBlock className="h-3 w-40" />
+        <SkeletonBlock className="h-8 w-32" />
+        <SkeletonBlock className="h-4 w-96 max-w-full" />
+      </div>
+
+      {/* ── Tab bar ── */}
+      <div className="flex gap-2 border-b border-outline-variant pb-px">
+        {['w-28', 'w-16', 'w-20'].map((w, i) => (
+          <SkeletonBlock key={i} className={`h-10 ${w}`} />
+        ))}
+      </div>
+
+      {/* ── Deposit form (default tab) ── */}
+      <div className="flex flex-col gap-6">
+        {/* Unlock timestamp */}
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-32" />
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* Amount */}
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-16" />
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* Recipient */}
+        <div className="flex flex-col gap-1">
+          <SkeletonBlock className="h-3 w-24" />
+          <SkeletonBlock className="h-10 w-full" />
+        </div>
+
+        {/* Submit */}
+        <SkeletonBlock className="h-12 w-full" />
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Skeletons/index.ts b/src/components/Skeletons/index.ts
new file mode 100644
index 0000000..17e902c
--- /dev/null
+++ b/src/components/Skeletons/index.ts
@@ -0,0 +1,6 @@
+export { SkeletonBlock } from './SkeletonBlock';
+export { StellarSendSkeleton } from './StellarSendSkeleton';
+export { StellarReceiveSkeleton } from './StellarReceiveSkeleton';
+export { StellarWithdrawSkeleton } from './StellarWithdrawSkeleton';
+export { StellarActivitySkeleton } from './StellarActivitySkeleton';
+export { StellarSettingsSkeleton } from './StellarSettingsSkeleton';
diff --git a/src/index.css b/src/index.css
index ea4b762..c473fcd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -77,6 +77,28 @@ input:focus {
   background: var(--color-scrollbar-thumb);
 }
 
+/* ── Skeleton shimmer animation ────────────────────────────────────────── */
+@keyframes skeleton-shimmer {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.animate-skeleton {
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  /* Respect user motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+/* ──────────────────────────────────────────────────────────────────────── */
+
 /* Solana Wallet Adapter overrides */
 .wallet-adapter-button {
   background-color: transparent !important;