suspense all the things

app/(main)/[username]/[repo]/blob/[...path]/page.tsx

@@ -1,10 +1,11 @@
+import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { getRepository, getRepoFile, getRepoBranches } from "@/actions/repositories";
 import { CodeViewer } from "@/components/code-viewer";
 import { BranchSelector } from "@/components/branch-selector";
 import { Badge } from "@/components/ui/badge";
-import { Lock, Globe, ChevronRight, Home, FileCode } from "lucide-react";
+import { Lock, Globe, ChevronRight, Home, FileCode, Loader2 } from "lucide-react";
 
 const LANGUAGE_MAP: Record<string, string> = {
   ts: "typescript",
@@ -32,30 +33,40 @@ function getLanguage(filename: string): string {
   return LANGUAGE_MAP[ext] || "text";
 }
 
-export default async function BlobPage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
+async function FileContent({ username, repoName, branch, filePath }: { username: string; repoName: string; branch: string; filePath: string }) {
-  const { username, repo: repoName, path: pathSegments } = await params;
+  const file = await getRepoFile(username, repoName, branch, filePath);
-  const branch = pathSegments[0];
-  const filePath = pathSegments.slice(1).join("/");
-
-  const repo = await getRepository(username, repoName);
-
-  if (!repo) {
-    notFound();
-  }
-
-  const [file, branches] = await Promise.all([
-    getRepoFile(username, repoName, branch, filePath),
-    getRepoBranches(username, repoName),
-  ]);
 
   if (!file) {
     notFound();
   }
 
+  const fileName = filePath.split("/").pop() || "";
+  const language = getLanguage(fileName);
+
+  return <CodeViewer content={file.content} language={language} showLineNumbers />;
+}
+
+function CodeSkeleton() {
+  return (
+    <div className="p-4 min-h-[400px] flex items-center justify-center">
+      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+    </div>
+  );
+}
+
+export default async function BlobPage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
+  const { username, repo: repoName, path: pathSegments } = await params;
+  const branch = pathSegments[0];
+  const filePath = pathSegments.slice(1).join("/");
+
+  const [repo, branches] = await Promise.all([getRepository(username, repoName), getRepoBranches(username, repoName)]);
+
+  if (!repo) {
+    notFound();
+  }
+
   const pathParts = filePath.split("/").filter(Boolean);
   const fileName = pathParts[pathParts.length - 1];
-  const language = getLanguage(fileName);
-  const lineCount = file.content.split("\n").length;
 
   return (
     <div className="container px-4 py-6">
@@ -86,12 +97,7 @@ export default async function BlobPage({ params }: { params: Promise<{ username:
 
       <div className="border border-border rounded-lg overflow-hidden">
         <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
-          <BranchSelector
+          <BranchSelector branches={branches} currentBranch={branch} username={username} repoName={repoName} />
-            branches={branches}
-            currentBranch={branch}
-            username={username}
-            repoName={repoName}
-          />
         </div>
         <nav className="flex items-center gap-1 px-4 py-2 bg-muted/30 border-b border-border text-sm">
           <Link href={`/${username}/${repoName}`} className="text-accent hover:underline flex items-center gap-1">
@@ -115,11 +121,13 @@ export default async function BlobPage({ params }: { params: Promise<{ username:
         <div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border">
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <FileCode className="h-4 w-4" />
-            <span>{lineCount} lines</span>
+            <span>{fileName}</span>
           </div>
         </div>
 
-        <CodeViewer content={file.content} language={language} showLineNumbers />
+        <Suspense fallback={<CodeSkeleton />}>
+          <FileContent username={username} repoName={repoName} branch={branch} filePath={filePath} />
+        </Suspense>
       </div>
     </div>
   );

app/(main)/[username]/[repo]/commits/[[...branch]]/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { getRepository, getRepoCommits, getRepoBranches } from "@/actions/repositories";
@@ -5,9 +6,82 @@ import { BranchSelector } from "@/components/branch-selector";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Lock, Globe, GitCommit, ChevronLeft, ChevronRight } from "lucide-react";
+import { Lock, Globe, GitCommit, ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 
+async function CommitsList({ username, repoName, branch, page, perPage }: { username: string; repoName: string; branch: string; page: number; perPage: number }) {
+  const skip = (page - 1) * perPage;
+  const { commits, hasMore } = await getRepoCommits(username, repoName, branch, perPage, skip);
+
+  if (commits.length === 0) {
+    return (
+      <div className="p-12 text-center">
+        <GitCommit className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+        <h3 className="text-lg font-medium mb-2">No commits yet</h3>
+        <p className="text-muted-foreground">This branch doesn&apos;t have any commits.</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="divide-y divide-border">
+        {commits.map((commit) => (
+          <div key={commit.oid} className="flex items-start gap-4 px-4 py-3 hover:bg-muted/30 transition-colors">
+            <Avatar className="h-8 w-8 mt-0.5">
+              <AvatarFallback className="text-xs bg-accent/20">{commit.author.name.charAt(0).toUpperCase()}</AvatarFallback>
+            </Avatar>
+            <div className="flex-1 min-w-0">
+              <p className="font-medium truncate">{commit.message.split("\n")[0]}</p>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
+                <span className="font-medium text-foreground">{commit.author.name}</span>
+                <span>committed</span>
+                <span>{formatDistanceToNow(new Date(commit.timestamp), { addSuffix: true })}</span>
+              </div>
+            </div>
+            <code className="text-xs font-mono bg-muted px-2 py-1 rounded shrink-0">{commit.oid.slice(0, 7)}</code>
+          </div>
+        ))}
+      </div>
+
+      {(page > 1 || hasMore) && (
+        <div className="flex items-center justify-between px-4 py-3 bg-card border-t border-border">
+          <Button variant="outline" size="sm" asChild disabled={page <= 1}>
+            <Link href={`/${username}/${repoName}/commits/${branch}?page=${page - 1}`} className={page <= 1 ? "pointer-events-none opacity-50" : ""}>
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              Newer
+            </Link>
+          </Button>
+          <span className="text-sm text-muted-foreground">Page {page}</span>
+          <Button variant="outline" size="sm" asChild disabled={!hasMore}>
+            <Link href={`/${username}/${repoName}/commits/${branch}?page=${page + 1}`} className={!hasMore ? "pointer-events-none opacity-50" : ""}>
+              Older
+              <ChevronRight className="h-4 w-4 ml-1" />
+            </Link>
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}
+
+function CommitsSkeleton() {
+  return (
+    <div className="divide-y divide-border">
+      {[...Array(5)].map((_, i) => (
+        <div key={i} className="flex items-start gap-4 px-4 py-3 animate-pulse">
+          <div className="h-8 w-8 bg-muted rounded-full" />
+          <div className="flex-1">
+            <div className="h-5 bg-muted rounded w-2/3 mb-2" />
+            <div className="h-4 bg-muted rounded w-1/3" />
+          </div>
+          <div className="h-6 bg-muted rounded w-16" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default async function CommitsPage({
   params,
   searchParams,
@@ -18,7 +92,7 @@ export default async function CommitsPage({
   const { username, repo: repoName, branch: branchSegments } = await params;
   const { page: pageParam } = await searchParams;
 
-  const repo = await getRepository(username, repoName);
+  const [repo, branches] = await Promise.all([getRepository(username, repoName), getRepoBranches(username, repoName)]);
 
   if (!repo) {
     notFound();
@@ -27,12 +101,6 @@ export default async function CommitsPage({
   const branch = branchSegments?.[0] || repo.defaultBranch;
   const page = parseInt(pageParam || "1", 10);
   const perPage = 30;
-  const skip = (page - 1) * perPage;
-
-  const [{ commits, hasMore }, branches] = await Promise.all([
-    getRepoCommits(username, repoName, branch, perPage, skip),
-    getRepoBranches(username, repoName),
-  ]);
 
   return (
     <div className="container px-4 py-6">
@@ -64,12 +132,7 @@ export default async function CommitsPage({
       <div className="border border-border rounded-lg overflow-hidden">
         <div className="flex items-center justify-between gap-4 px-4 py-3 bg-card border-b border-border">
           <div className="flex items-center gap-3">
-            <BranchSelector
+            <BranchSelector branches={branches} currentBranch={branch} username={username} repoName={repoName} />
-              branches={branches}
-              currentBranch={branch}
-              username={username}
-              repoName={repoName}
-            />
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
               <GitCommit className="h-4 w-4" />
               <span>Commits</span>
@@ -77,69 +140,10 @@ export default async function CommitsPage({
           </div>
         </div>
 
-        {commits.length === 0 ? (
+        <Suspense fallback={<CommitsSkeleton />}>
-          <div className="p-12 text-center">
+          <CommitsList username={username} repoName={repoName} branch={branch} page={page} perPage={perPage} />
-            <GitCommit className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+        </Suspense>
-            <h3 className="text-lg font-medium mb-2">No commits yet</h3>
-            <p className="text-muted-foreground">
-              This branch doesn&apos;t have any commits.
-            </p>
-          </div>
-        ) : (
-          <div className="divide-y divide-border">
-            {commits.map((commit) => (
-              <div
-                key={commit.oid}
-                className="flex items-start gap-4 px-4 py-3 hover:bg-muted/30 transition-colors"
-              >
-                <Avatar className="h-8 w-8 mt-0.5">
-                  <AvatarFallback className="text-xs bg-accent/20">
-                    {commit.author.name.charAt(0).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex-1 min-w-0">
-                  <p className="font-medium truncate">{commit.message.split("\n")[0]}</p>
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground mt-1">
-                    <span className="font-medium text-foreground">{commit.author.name}</span>
-                    <span>committed</span>
-                    <span>
-                      {formatDistanceToNow(new Date(commit.timestamp), { addSuffix: true })}
-                    </span>
-                  </div>
-                </div>
-                <code className="text-xs font-mono bg-muted px-2 py-1 rounded shrink-0">
-                  {commit.oid.slice(0, 7)}
-                </code>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {(page > 1 || hasMore) && (
-          <div className="flex items-center justify-between px-4 py-3 bg-card border-t border-border">
-            <Button variant="outline" size="sm" asChild disabled={page <= 1}>
-              <Link
-                href={`/${username}/${repoName}/commits/${branch}?page=${page - 1}`}
-                className={page <= 1 ? "pointer-events-none opacity-50" : ""}
-              >
-                <ChevronLeft className="h-4 w-4 mr-1" />
-                Newer
-              </Link>
-            </Button>
-            <span className="text-sm text-muted-foreground">Page {page}</span>
-            <Button variant="outline" size="sm" asChild disabled={!hasMore}>
-              <Link
-                href={`/${username}/${repoName}/commits/${branch}?page=${page + 1}`}
-                className={!hasMore ? "pointer-events-none opacity-50" : ""}
-              >
-                Older
-                <ChevronRight className="h-4 w-4 ml-1" />
-              </Link>
-            </Button>
-          </div>
-        )}
       </div>
     </div>
   );
 }
-

app/(main)/[username]/[repo]/tree/[...path]/page.tsx

@@ -1,31 +1,48 @@
+import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { getRepository, getRepoFileTree, getRepoBranches } from "@/actions/repositories";
 import { FileTree } from "@/components/file-tree";
 import { BranchSelector } from "@/components/branch-selector";
 import { Badge } from "@/components/ui/badge";
-import { Lock, Globe, ChevronRight, Home } from "lucide-react";
+import { Lock, Globe, ChevronRight, Home, Loader2 } from "lucide-react";
+
+async function TreeContent({ username, repoName, branch, dirPath }: { username: string; repoName: string; branch: string; dirPath: string }) {
+  const fileTree = await getRepoFileTree(username, repoName, branch, dirPath);
+
+  if (!fileTree) {
+    notFound();
+  }
+
+  return <FileTree files={fileTree.files} username={username} repoName={repoName} branch={branch} basePath={dirPath} />;
+}
+
+function TreeSkeleton() {
+  return (
+    <div className="divide-y divide-border">
+      {[...Array(5)].map((_, i) => (
+        <div key={i} className="flex items-center gap-3 px-4 py-2.5 animate-pulse">
+          <div className="h-4 w-4 bg-muted rounded" />
+          <div className="h-4 bg-muted rounded w-1/4" />
+          <div className="h-4 bg-muted rounded w-1/3 ml-auto hidden sm:block" />
+          <div className="h-4 bg-muted rounded w-20" />
+        </div>
+      ))}
+    </div>
+  );
+}
 
 export default async function TreePage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
   const { username, repo: repoName, path: pathSegments } = await params;
   const branch = pathSegments[0];
   const dirPath = pathSegments.slice(1).join("/");
 
-  const repo = await getRepository(username, repoName);
+  const [repo, branches] = await Promise.all([getRepository(username, repoName), getRepoBranches(username, repoName)]);
 
   if (!repo) {
     notFound();
   }
 
-  const [fileTree, branches] = await Promise.all([
-    getRepoFileTree(username, repoName, branch, dirPath),
-    getRepoBranches(username, repoName),
-  ]);
-
-  if (!fileTree) {
-    notFound();
-  }
-
   const pathParts = dirPath.split("/").filter(Boolean);
 
   return (
@@ -57,13 +74,7 @@ export default async function TreePage({ params }: { params: Promise<{ username:
 
       <div className="border border-border rounded-lg overflow-hidden">
         <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
-          <BranchSelector
+          <BranchSelector branches={branches} currentBranch={branch} username={username} repoName={repoName} basePath={dirPath} />
-            branches={branches}
-            currentBranch={branch}
-            username={username}
-            repoName={repoName}
-            basePath={dirPath}
-          />
         </div>
 
         <nav className="flex items-center gap-1 px-4 py-2 bg-muted/30 border-b border-border text-sm">
@@ -85,7 +96,9 @@ export default async function TreePage({ params }: { params: Promise<{ username:
           ))}
         </nav>
 
-        <FileTree files={fileTree.files} username={username} repoName={repoName} branch={branch} basePath={dirPath} />
+        <Suspense fallback={<TreeSkeleton />}>
+          <TreeContent username={username} repoName={repoName} branch={branch} dirPath={dirPath} />
+        </Suspense>
       </div>
     </div>
   );

app/(main)/[username]/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { db } from "@/db";
 import { users } from "@/db/schema";
@@ -5,11 +6,44 @@ import { eq } from "drizzle-orm";
 import { getUserRepositoriesWithStars } from "@/actions/repositories";
 import { RepoList } from "@/components/repo-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { CalendarDays, GitBranch, MapPin, Link as LinkIcon } from "lucide-react";
+import { CalendarDays, GitBranch, MapPin, Link as LinkIcon, Loader2 } from "lucide-react";
 import { format } from "date-fns";
 import Link from "next/link";
 import { GithubIcon, XIcon, LinkedInIcon } from "@/components/icons";
 
+async function RepoSection({ username }: { username: string }) {
+  const repos = await getUserRepositoriesWithStars(username);
+
+  if (repos.length === 0) {
+    return (
+      <div className="border border-dashed border-border rounded-lg p-12 text-center">
+        <GitBranch className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+        <h3 className="text-lg font-medium mb-2">No repositories yet</h3>
+        <p className="text-muted-foreground">This user hasn&apos;t created any public repositories.</p>
+      </div>
+    );
+  }
+
+  return <RepoList repos={repos} username={username} />;
+}
+
+function RepoSkeleton() {
+  return (
+    <div className="space-y-4">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="border border-border rounded-lg p-4 animate-pulse">
+          <div className="h-5 bg-muted rounded w-1/3 mb-2" />
+          <div className="h-4 bg-muted rounded w-2/3 mb-3" />
+          <div className="flex gap-4">
+            <div className="h-4 bg-muted rounded w-16" />
+            <div className="h-4 bg-muted rounded w-20" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export default async function ProfilePage({ params }: { params: Promise<{ username: string }> }) {
   const { username } = await params;
 
@@ -21,8 +55,6 @@ export default async function ProfilePage({ params }: { params: Promise<{ userna
     notFound();
   }
 
-  const repos = await getUserRepositoriesWithStars(username);
-
   return (
     <div className="container px-4 py-8">
       <div className="flex flex-col lg:flex-row gap-8">
@@ -93,18 +125,11 @@ export default async function ProfilePage({ params }: { params: Promise<{ userna
           <div className="flex items-center gap-2 mb-6">
             <GitBranch className="h-5 w-5" />
             <h2 className="text-xl font-semibold">Repositories</h2>
-            <span className="text-sm text-muted-foreground">({repos.length})</span>
           </div>
 
-          {repos.length === 0 ? (
+          <Suspense fallback={<RepoSkeleton />}>
-            <div className="border border-dashed border-border rounded-lg p-12 text-center">
+            <RepoSection username={username} />
-              <GitBranch className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+          </Suspense>
-              <h3 className="text-lg font-medium mb-2">No repositories yet</h3>
-              <p className="text-muted-foreground">{user.name} hasn&apos;t created any public repositories.</p>
-            </div>
-          ) : (
-            <RepoList repos={repos} username={username} />
-          )}
         </div>
       </div>
     </div>