Aggressive SWR caching + hover preloading for instant tab switches

- In-memory SWR cache: returns stale data instantly while revalidating
  in background (30s fresh, 5min max age, request deduplication)
- Repo metadata cached: revisiting a repo is instant (no skeleton)
- Directory contents cached: navigating back to a dir is instant
- Issue/PR lists cached: switching tabs shows data immediately
- Hover preloading: hovering Issues/PR tabs preloads data before click
- First mount only shows skeleton, subsequent renders use cached data
- preload() utility for fire-and-forget cache warming

Author: aidenybai

src/app/[owner]/[repo]/[[...segments]]/page.tsx

@@ -2,7 +2,8 @@
 
 import { useParams, useRouter } from "next/navigation";
 import { useAuth } from "@/app/auth-provider";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { cached } from "@/lib/cache";
 import {
   fetchRepo,
   fetchContents,
@@ -146,19 +147,27 @@ export default function RepoPage() {
     [navigate, base],
   );
 
-  // Fetch repo metadata once
+  // Fetch repo metadata once — cached aggressively
+  const cacheKey = `repo:${owner}/${repo}`;
+  const hasMounted = useRef(false);
+
   useEffect(() => {
     let cancelled = false;
-    setLoading(true);
+    // Only show loading skeleton on very first mount, not re-renders
+    if (!hasMounted.current) {
+      setLoading(true);
+      hasMounted.current = true;
+    }
     setError(null);
+
     Promise.all([
-      fetchRepo(token, owner, repo),
-      fetchLanguages(token, owner, repo),
-      fetchLatestCommit(token, owner, repo),
-      fetchCommitCount(token, owner, repo),
-      fetchIssueCount(token, owner, repo),
-      fetchPrCount(token, owner, repo),
-      fetchLatestRelease(token, owner, repo),
+      cached(`${cacheKey}:meta`, () => fetchRepo(token, owner, repo)),
+      cached(`${cacheKey}:langs`, () => fetchLanguages(token, owner, repo)),
+      cached(`${cacheKey}:latest`, () => fetchLatestCommit(token, owner, repo)),
+      cached(`${cacheKey}:commits`, () => fetchCommitCount(token, owner, repo)),
+      cached(`${cacheKey}:issues`, () => fetchIssueCount(token, owner, repo)),
+      cached(`${cacheKey}:prs`, () => fetchPrCount(token, owner, repo)),
+      cached(`${cacheKey}:release`, () => fetchLatestRelease(token, owner, repo)),
     ])
       .then(([r, l, lc, cc, ic, prc, rel]) => {
         if (cancelled) return;
@@ -180,13 +189,13 @@ export default function RepoPage() {
     return () => { cancelled = true; };
   }, [token, owner, repo]);
 
-  // Fetch directory contents when path changes (for code view)
+  // Fetch directory contents when path changes (for code view) — cached
   useEffect(() => {
     if (view.type !== "code") return;
     let cancelled = false;
     Promise.all([
-      fetchContents(token, owner, repo, currentPath),
-      currentPath ? Promise.resolve(null) : fetchReadmeHtml(token, owner, repo),
+      cached(`${cacheKey}:contents:${currentPath}`, () => fetchContents(token, owner, repo, currentPath)),
+      currentPath ? Promise.resolve(null) : cached(`${cacheKey}:readme`, () => fetchReadmeHtml(token, owner, repo)),
     ]).then(([c, rm]) => {
       if (cancelled) return;
       setContents(c);
@@ -368,6 +377,7 @@ export default function RepoPage() {
     <div className="mx-auto max-w-[1280px] px-4 pt-4 md:px-6">
       <RepoHeader repo={repoData} />
       <RepoNav
+        token={token}
         owner={owner}
         repo={repo}
         activeTab={viewToTab(view)}

src/app/[owner]/[repo]/issue-list.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Avatar, Button } from "@primer/react";
+import { cached } from "@/lib/cache";
 import {
   IssueOpenedIcon,
   IssueClosedIcon,
@@ -43,17 +44,16 @@ export function IssueList({
 
   useEffect(() => {
     let cancelled = false;
-    setLoading(true);
     setPage(1);
-    fetchIssues(token, owner, repo, filter, 1).then((data) => {
+    const key = `issues:${owner}/${repo}:${filter}`;
+    cached(key, () => fetchIssues(token, owner, repo, filter, 1)).then((data) => {
       if (cancelled) return;
       setIssues(data);
       setHasMore(data.length === 30);
       setLoading(false);
     });
-    // Fetch closed count once
     if (closedCount === 0) {
-      fetchIssues(token, owner, repo, "closed", 1).then((data) => {
+      cached(`issues:${owner}/${repo}:closed:count`, () => fetchIssues(token, owner, repo, "closed", 1)).then((data) => {
         if (!cancelled) setClosedCount(data.length >= 30 ? 30 : data.length);
       });
     }

src/app/[owner]/[repo]/pr-list.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Avatar, Button } from "@primer/react";
+import { cached } from "@/lib/cache";
 import {
   GitPullRequestIcon,
   GitMergeIcon,
@@ -53,16 +54,16 @@ export function PRList({
 
   useEffect(() => {
     let cancelled = false;
-    setLoading(true);
     setPage(1);
-    fetchPRs(token, owner, repo, filter, 1).then((data) => {
+    const key = `prs:${owner}/${repo}:${filter}`;
+    cached(key, () => fetchPRs(token, owner, repo, filter, 1)).then((data) => {
       if (cancelled) return;
       setPrs(data);
       setHasMore(data.length === 30);
       setLoading(false);
     });
     if (closedCount === 0) {
-      fetchPRs(token, owner, repo, "closed", 1).then((data) => {
+      cached(`prs:${owner}/${repo}:closed:count`, () => fetchPRs(token, owner, repo, "closed", 1)).then((data) => {
         if (!cancelled) setClosedCount(data.length >= 30 ? 30 : data.length);
       });
     }

src/app/[owner]/[repo]/repo-nav.tsx

@@ -9,10 +9,13 @@ import {
   ShieldIcon,
   GraphIcon,
 } from "@primer/octicons-react";
+import { preload } from "@/lib/cache";
+import { fetchIssues, fetchPRs } from "@/lib/github";
 
 export type RepoTab = "code" | "issues" | "pulls";
 
 interface RepoNavProps {
+  token: string;
   owner: string;
   repo: string;
   activeTab: RepoTab;
@@ -22,6 +25,7 @@ interface RepoNavProps {
 }
 
 export function RepoNav({
+  token,
   owner,
   repo,
   activeTab,
@@ -36,6 +40,19 @@ export function RepoNav({
     onTabChange(tab);
   };
 
+  // Preload data on hover so tab switches are instant
+  const preloadIssues = () => {
+    preload(`issues:${owner}/${repo}:open`, () =>
+      fetchIssues(token, owner, repo, "open", 1),
+    );
+  };
+
+  const preloadPRs = () => {
+    preload(`prs:${owner}/${repo}:open`, () =>
+      fetchPRs(token, owner, repo, "open", 1),
+    );
+  };
+
   return (
     <UnderlineNav aria-label="Repository">
       <UnderlineNav.Item
@@ -52,6 +69,8 @@ export function RepoNav({
         counter={issueCount}
         href={`${base}/issues`}
         onSelect={handleSelect("issues")}
+        onMouseEnter={preloadIssues}
+        onFocus={preloadIssues}
       >
         Issues
       </UnderlineNav.Item>
@@ -61,6 +80,8 @@ export function RepoNav({
         counter={prCount}
         href={`${base}/pulls`}
         onSelect={handleSelect("pulls")}
+        onMouseEnter={preloadPRs}
+        onFocus={preloadPRs}
       >
         Pull requests
       </UnderlineNav.Item>

src/lib/cache.ts

@@ -0,0 +1,74 @@
+/**
+ * Aggressive in-memory cache with SWR (stale-while-revalidate) pattern.
+ * Returns stale data immediately while revalidating in background.
+ */
+
+type CacheEntry<T> = {
+  data: T;
+  timestamp: number;
+};
+
+const store = new Map<string, CacheEntry<unknown>>();
+const inflight = new Map<string, Promise<unknown>>();
+
+const STALE_TIME = 30_000; // 30s — data is "fresh" for this long
+const MAX_AGE = 5 * 60_000; // 5min — evict after this
+
+export async function cached<T>(
+  key: string,
+  fetcher: () => Promise<T>,
+  opts?: { staleTime?: number },
+): Promise<T> {
+  const staleTime = opts?.staleTime ?? STALE_TIME;
+  const entry = store.get(key) as CacheEntry<T> | undefined;
+  const now = Date.now();
+
+  // Fresh cache hit — return immediately, no revalidation
+  if (entry && now - entry.timestamp < staleTime) {
+    return entry.data;
+  }
+
+  // Stale cache hit — return stale data, revalidate in background
+  if (entry && now - entry.timestamp < MAX_AGE) {
+    // Deduplicate inflight requests
+    if (!inflight.has(key)) {
+      const promise = fetcher().then((data) => {
+        store.set(key, { data, timestamp: Date.now() });
+        inflight.delete(key);
+        return data;
+      });
+      inflight.set(key, promise);
+    }
+    return entry.data;
+  }
+
+  // No cache — deduplicate and fetch
+  if (inflight.has(key)) {
+    return inflight.get(key) as Promise<T>;
+  }
+
+  const promise = fetcher().then((data) => {
+    store.set(key, { data, timestamp: Date.now() });
+    inflight.delete(key);
+    return data;
+  });
+  inflight.set(key, promise);
+  return promise;
+}
+
+/** Preload a key into cache without blocking */
+export function preload<T>(key: string, fetcher: () => Promise<T>) {
+  if (store.has(key)) return;
+  if (inflight.has(key)) return;
+  const promise = fetcher().then((data) => {
+    store.set(key, { data, timestamp: Date.now() });
+    inflight.delete(key);
+    return data;
+  });
+  inflight.set(key, promise);
+}
+
+/** Invalidate a specific cache key */
+export function invalidate(key: string) {
+  store.delete(key);
+}