diff --git a/packages/web/src/app/sessions/[id]/loading.test.tsx b/packages/web/src/app/sessions/[id]/loading.test.tsx
new file mode 100644
index 000000000..da87ae0f6
--- /dev/null
+++ b/packages/web/src/app/sessions/[id]/loading.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import SessionLoading from "./loading";
+
+describe("SessionLoading", () => {
+  it("renders the session loading text", () => {
+    render(<SessionLoading />);
+    expect(screen.getByText("Loading session…")).toBeInTheDocument();
+  });
+
+  it("renders a spinning indicator", () => {
+    const { container } = render(<SessionLoading />);
+    const spinner = container.querySelector(".animate-spin");
+    expect(spinner).toBeInTheDocument();
+    expect(spinner?.tagName.toLowerCase()).toBe("svg");
+  });
+});
diff --git a/packages/web/src/app/sessions/[id]/loading.tsx b/packages/web/src/app/sessions/[id]/loading.tsx
new file mode 100644
index 000000000..d81ee937a
--- /dev/null
+++ b/packages/web/src/app/sessions/[id]/loading.tsx
@@ -0,0 +1,20 @@
+export default function SessionLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-[var(--color-bg-base)]">
+      <div className="flex flex-col items-center gap-3">
+        <svg
+          className="h-5 w-5 animate-spin text-[var(--color-text-tertiary)]"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M12 3a9 9 0 1 0 9 9" />
+        </svg>
+        <p className="text-[13px] text-[var(--color-text-tertiary)]">
+          Loading session…
+        </p>
+      </div>
+    </div>
+  );
+}