diff --git a/src/app/leaderboard/[country]/loading.tsx b/src/app/leaderboard/[country]/loading.tsx
new file mode 100644
index 0000000..612849f
--- /dev/null
+++ b/src/app/leaderboard/[country]/loading.tsx
@@ -0,0 +1,71 @@
+import { AppFooter } from "@/components/layout/app-footer";
+import { AppHeader } from "@/components/layout/app-header";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function CountryLeaderboardLoading() {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <AppHeader />
+
+      <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-6 px-4 py-10">
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-9 w-36 rounded-md" />
+        </div>
+
+        <section className="rounded-3xl border border-border/60 bg-gradient-to-br from-primary/10 via-background to-background px-6 py-8 shadow-sm">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="mt-4 h-9 w-64 max-w-full" />
+          <Skeleton className="mt-3 h-4 w-full max-w-xl" />
+          <Skeleton className="mt-2 h-4 w-3/4 max-w-md" />
+        </section>
+
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-52" />
+            <Skeleton className="h-4 w-72 max-w-full" />
+            <Skeleton className="mt-2 h-10 w-full max-w-sm rounded-md" />
+          </CardHeader>
+
+          <CardContent>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b">
+                    {Array.from({ length: 6 }).map((_, index) => (
+                      <th key={index} className="px-4 py-3 text-left">
+                        <Skeleton className="h-4 w-16" />
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {Array.from({ length: 6 }).map((_, rowIndex) => (
+                    <tr key={rowIndex} className="border-b last:border-0">
+                      <td className="px-4 py-4">
+                        <Skeleton className="h-4 w-6" />
+                      </td>
+                      <td className="px-4 py-4">
+                        <div className="flex items-center gap-3">
+                          <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+                          <Skeleton className="h-4 w-28" />
+                        </div>
+                      </td>
+                      {Array.from({ length: 4 }).map((_, cellIndex) => (
+                        <td key={cellIndex} className="px-4 py-4">
+                          <Skeleton className="h-4 w-12" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <AppFooter />
+    </main>
+  );
+}
diff --git a/src/app/leaderboard/loading.tsx b/src/app/leaderboard/loading.tsx
new file mode 100644
index 0000000..42e25e7
--- /dev/null
+++ b/src/app/leaderboard/loading.tsx
@@ -0,0 +1,77 @@
+import { AppFooter } from "@/components/layout/app-footer";
+import { AppHeader } from "@/components/layout/app-header";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LeaderboardLoading() {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <AppHeader />
+
+      <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-6 px-4 py-10">
+        {/* Leaderboard hero */}
+        <section className="rounded-3xl border border-border/60 bg-gradient-to-br from-primary/10 via-background to-background px-6 py-9 shadow-sm">
+          <Skeleton className="h-3 w-40" />
+
+          <div className="mt-4 space-y-2">
+            <Skeleton className="h-8 w-full max-w-2xl" />
+            <Skeleton className="h-8 w-56 max-w-full" />
+          </div>
+
+          <div className="mt-6 space-y-1">
+            <Skeleton className="h-4 w-full max-w-3xl" />
+            <Skeleton className="h-4 w-full max-w-xl" />
+          </div>
+
+          <Skeleton className="mt-3 h-4 w-72 max-w-full" />
+        </section>
+
+        {/* Country leaderboard container */}
+        <section className="rounded-xl border border-border/60 bg-card p-6 sm:p-8">
+          {/* Section heading */}
+          <div className="space-y-1">
+            <Skeleton className="h-3 w-40" />
+            <Skeleton className="h-4 w-56" />
+            <Skeleton className="h-4 w-full max-w-md" />
+          </div>
+
+          {/* Worldwide leaderboard link */}
+          <div className="mt-10 flex items-center gap-4 rounded-xl border border-primary/30 bg-background p-4">
+            <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+
+            <div className="min-w-0 flex-1 space-y-1">
+              <Skeleton className="h-4 w-48 max-w-full" />
+              <Skeleton className="h-4 w-full max-w-sm" />
+            </div>
+          </div>
+
+          {/* Country search */}
+          <Skeleton className="mt-5 h-8 w-full max-w-[21rem] rounded-md" />
+
+          {/* Country cards */}
+          <div className="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
+            {Array.from({ length: 25 }).map((_, index) => (
+              <div
+                key={index}
+                className="flex min-h-[52px] items-center rounded-lg border border-border/60 bg-background p-2.5"
+              >
+                <div className="min-w-0 flex-1 space-y-1">
+                  <div className="flex items-center gap-1.5">
+                    <Skeleton className="h-3 w-3 shrink-0 rounded-sm" />
+                    <Skeleton className="h-3.5 w-24 max-w-full" />
+                  </div>
+
+                  <div className="flex items-center gap-1">
+                    <Skeleton className="h-3 w-3 shrink-0" />
+                    <Skeleton className="h-3 w-20" />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      <AppFooter />
+    </main>
+  );
+}