diff --git a/.changeset/olive-spoons-shake.md b/.changeset/olive-spoons-shake.md
new file mode 100644
index 0000000..f6405b2
--- /dev/null
+++ b/.changeset/olive-spoons-shake.md
@@ -0,0 +1,8 @@
+---
+'@pdsjs/cloudflare': patch
+'@pdsjs/node': patch
+---
+
+The repository page draws skeleton placeholders while it loads. The file
+listing, a file's contents, and the commit history each get the shape of the
+content they are about to show, instead of a blank panel.
diff --git a/packages/account-ui/src/components/molecules/skeleton-row.jsx b/packages/account-ui/src/components/molecules/skeleton-row.jsx
new file mode 100644
index 0000000..44bf7d0
--- /dev/null
+++ b/packages/account-ui/src/components/molecules/skeleton-row.jsx
@@ -0,0 +1,28 @@
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+import { cn } from '#/lib/utils.js';
+
+/**
+ * A plain ListRow's geometry as placeholders: the media square, the title bar,
+ * an optional second line, and an optional trailing bar. Each width prop takes
+ * a Tailwind width class, so a list of rows can vary its widths and read as
+ * text rather than as a block.
+ */
+export function SkeletonRow({
+  media = 'size-4 rounded-md',
+  title = 'w-40',
+  description,
+  action,
+}) {
+  return (
+    <div className="flex w-full items-center gap-4 px-1 py-3">
+      <Skeleton className={media} />
+      <div className="flex min-w-0 flex-1 flex-col gap-2">
+        <Skeleton className={cn('h-3.5 max-w-full rounded-md', title)} />
+        {description && (
+          <Skeleton className={cn('h-3 max-w-full rounded-md', description)} />
+        )}
+      </div>
+      {action && <Skeleton className={cn('h-3 shrink-0 rounded-md', action)} />}
+    </div>
+  );
+}
diff --git a/packages/account-ui/src/components/organisms/commit-log-skeleton.jsx b/packages/account-ui/src/components/organisms/commit-log-skeleton.jsx
new file mode 100644
index 0000000..5706d10
--- /dev/null
+++ b/packages/account-ui/src/components/organisms/commit-log-skeleton.jsx
@@ -0,0 +1,27 @@
+import { SkeletonRow } from '#/components/molecules/skeleton-row.jsx';
+
+/** A commit subject varies in length; the author line and the short sha do
+ * not. */
+const ROWS = [
+  { key: 'a', title: 'w-56' },
+  { key: 'b', title: 'w-40' },
+  { key: 'c', title: 'w-64' },
+  { key: 'd', title: 'w-44' },
+  { key: 'e', title: 'w-52' },
+];
+
+/** The commit list, as placeholders, shown while the history loads. */
+export function CommitLogSkeleton() {
+  return (
+    <div className="rounded-2xl border border-border bg-card px-2 py-1">
+      {ROWS.map((row) => (
+        <SkeletonRow
+          key={row.key}
+          title={row.title}
+          description="w-32"
+          action="w-12"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/account-ui/src/components/organisms/file-content-skeleton.jsx b/packages/account-ui/src/components/organisms/file-content-skeleton.jsx
new file mode 100644
index 0000000..11c8a67
--- /dev/null
+++ b/packages/account-ui/src/components/organisms/file-content-skeleton.jsx
@@ -0,0 +1,36 @@
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+
+/** Indent and length per line, so the block reads as code. */
+const LINES = [
+  { key: 'a', width: 'w-[38%]', indent: '' },
+  { key: 'b', width: 'w-[52%]', indent: '' },
+  { key: 'c', width: 'w-[30%]', indent: 'ml-6' },
+  { key: 'd', width: 'w-[44%]', indent: 'ml-6' },
+  { key: 'e', width: 'w-[22%]', indent: 'ml-12' },
+  { key: 'f', width: 'w-[48%]', indent: 'ml-6' },
+  { key: 'g', width: 'w-[18%]', indent: '' },
+  { key: 'h', width: 'w-[56%]', indent: '' },
+  { key: 'i', width: 'w-[34%]', indent: 'ml-6' },
+  { key: 'j', width: 'w-[26%]', indent: 'ml-6' },
+];
+
+/** A file's header line and its text, as placeholders, shown while the file
+ * loads. */
+export function FileContentSkeleton() {
+  return (
+    <div className="rounded-2xl border border-border bg-card">
+      <div className="flex items-center justify-between border-border border-b px-5 py-2.5">
+        <Skeleton className="h-3 w-16 rounded-md" />
+        <Skeleton className="h-3 w-12 rounded-md" />
+      </div>
+      <div className="flex flex-col gap-2.5 px-5 py-4">
+        {LINES.map((line) => (
+          <Skeleton
+            key={line.key}
+            className={`h-3 rounded-md ${line.indent} ${line.width}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/account-ui/src/components/organisms/file-tree-skeleton.jsx b/packages/account-ui/src/components/organisms/file-tree-skeleton.jsx
new file mode 100644
index 0000000..8bf5125
--- /dev/null
+++ b/packages/account-ui/src/components/organisms/file-tree-skeleton.jsx
@@ -0,0 +1,24 @@
+import { SkeletonRow } from '#/components/molecules/skeleton-row.jsx';
+
+/** Directory rows come first and carry no size, so the top rows have no
+ * trailing bar. The widths run short to long to read as file names. */
+const ROWS = [
+  { key: 'a', title: 'w-24' },
+  { key: 'b', title: 'w-32' },
+  { key: 'c', title: 'w-20', action: 'w-10' },
+  { key: 'd', title: 'w-44', action: 'w-12' },
+  { key: 'e', title: 'w-28', action: 'w-8' },
+  { key: 'f', title: 'w-36', action: 'w-12' },
+];
+
+/** The repository listing at a path, as placeholders, shown while the tree
+ * loads. */
+export function FileTreeSkeleton() {
+  return (
+    <div className="rounded-2xl border border-border bg-card px-2 py-1">
+      {ROWS.map((row) => (
+        <SkeletonRow key={row.key} title={row.title} action={row.action} />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/account-ui/src/components/organisms/repo-page-skeleton.jsx b/packages/account-ui/src/components/organisms/repo-page-skeleton.jsx
new file mode 100644
index 0000000..64a0898
--- /dev/null
+++ b/packages/account-ui/src/components/organisms/repo-page-skeleton.jsx
@@ -0,0 +1,24 @@
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+import { FileTreeSkeleton } from '#/components/organisms/file-tree-skeleton.jsx';
+
+/** The clone commands, the breadcrumb and ref bar, and the listing, as
+ * placeholders, shown while the repository loads. */
+export function RepoPageSkeleton() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Skeleton className="h-[38px] rounded-lg" />
+        <Skeleton className="h-[38px] rounded-lg" />
+      </div>
+      <div className="flex items-center justify-between gap-3">
+        <Skeleton className="h-4 w-40 rounded-md" />
+        <div className="flex shrink-0 items-center gap-3">
+          <Skeleton className="h-3.5 w-14 rounded-md" />
+          <Skeleton className="h-3.5 w-16 rounded-md" />
+          <Skeleton className="h-7 w-24 rounded-lg" />
+        </div>
+      </div>
+      <FileTreeSkeleton />
+    </div>
+  );
+}
diff --git a/packages/account-ui/src/pages/git-repo-page.jsx b/packages/account-ui/src/pages/git-repo-page.jsx
index 97d1c26..dab99fa 100644
--- a/packages/account-ui/src/pages/git-repo-page.jsx
+++ b/packages/account-ui/src/pages/git-repo-page.jsx
@@ -18,6 +18,10 @@ import { Notice } from '#/components/atoms/notice.jsx';
 import { ListRow } from '#/components/molecules/list-row.jsx';
 import { SelectField } from '#/components/molecules/select-field.jsx';
 import { TextField } from '#/components/molecules/text-field.jsx';
+import { CommitLogSkeleton } from '#/components/organisms/commit-log-skeleton.jsx';
+import { FileContentSkeleton } from '#/components/organisms/file-content-skeleton.jsx';
+import { FileTreeSkeleton } from '#/components/organisms/file-tree-skeleton.jsx';
+import { RepoPageSkeleton } from '#/components/organisms/repo-page-skeleton.jsx';
 import { get, post } from '#/lib/api.js';
 import { bytes, timeAgo } from '#/lib/format.js';
 import { queryKeys, useApiMutation } from '#/lib/query.js';
@@ -42,7 +46,7 @@ function LogView({ name, refName, space }) {
       ),
   });
   if (error) return <Notice variant="error">{error.message}</Notice>;
-  if (!data) return null;
+  if (!data) return <CommitLogSkeleton />;
   if (data.enabled === false) {
     return (
       <Notice>
@@ -363,7 +367,7 @@ function FileView({ name, refName, path, space }) {
     queryFn: () => get(`/git/file?${query}`),
   });
   if (error) return <Notice variant="error">{error.message}</Notice>;
-  if (!data) return null;
+  if (!data) return <FileContentSkeleton />;
   if (data.mediaType) {
     return (
       <div className="rounded-2xl border border-border bg-card">
@@ -439,7 +443,7 @@ export function GitRepoPage({
   });
 
   if (repoError) return <Notice variant="error">{repoError.message}</Notice>;
-  if (!repoData) return null;
+  if (!repoData) return <RepoPageSkeleton />;
   if (!repo) {
     return <Notice variant="error">No repository named "{name}".</Notice>;
   }
@@ -562,7 +566,9 @@ export function GitRepoPage({
         </Notice>
       ) : treeError ? (
         <Notice variant="error">{treeError.message}</Notice>
-      ) : !tree ? null : (
+      ) : !tree ? (
+        <FileTreeSkeleton />
+      ) : (
         <div className="rounded-2xl border border-border bg-card px-2 py-1">
           {path && (
             <ListRow