feat(dashboard): add panel-level Suspense boundaries for independent loading (#94)

src/app/(app)/dashboard/active-issues.tsx

@@ -0,0 +1,61 @@
+import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
+import { getRecommendations } from '@/app/actions/recommendations';
+import { isOk } from '@/lib/result';
+import RecCards from './rec-cards';
+
+export default async function ActiveIssuesSection() {
+  const recsResult = await getRecommendations();
+  let recs: any[] = [];
+  if (isOk(recsResult)) {
+    recs = recsResult.data;
+  }
+
+  return (
+    <section>
+      <div className="mb-6 flex items-center justify-between border-b border-[#2d333b] pb-4">
+        <h2 className="text-[11px] uppercase tracking-widest text-zinc-500">ACTIVE ISSUES</h2>
+        <Link
+          href="/issues"
+          className="flex items-center gap-2 text-[11px] uppercase tracking-widest text-zinc-400 hover:text-white"
+        >
+          BROWSE MORE <ArrowRight className="h-3 w-3" />
+        </Link>
+      </div>
+
+      {recs.length > 0 ? (
+        <RecCards recs={recs} />
+      ) : (
+        <div className="py-4 text-sm text-zinc-500">No recommendations yet. Check back soon.</div>
+      )}
+    </section>
+  );
+}
+
+export function RecsSkeleton() {
+  return (
+    <section>
+      <div className="mb-6 flex items-center justify-between border-b border-[#2d333b] pb-4">
+        <h2 className="text-[11px] uppercase tracking-widest text-zinc-500">ACTIVE ISSUES</h2>
+        <div className="h-4 w-28 animate-pulse bg-zinc-800" />
+      </div>
+      <div className="space-y-6">
+        {[1, 2].map((i) => (
+          <div key={i} className="border-b border-[#2d333b] py-6 last:border-0">
+            <div className="mb-3 flex items-center gap-2">
+              <div className="h-5 w-8 animate-pulse bg-zinc-800" />
+            </div>
+            <div className="mb-4 h-6 w-3/4 animate-pulse bg-zinc-800" />
+            <div className="flex items-center justify-between">
+              <div className="flex gap-3">
+                <div className="h-7 w-16 animate-pulse bg-zinc-800" />
+                <div className="h-7 w-10 animate-pulse bg-zinc-800" />
+              </div>
+              <div className="h-4 w-12 animate-pulse bg-zinc-800" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/(app)/dashboard/github-prs-wrapper.tsx

@@ -0,0 +1,75 @@
+import { getServiceSupabase } from '@/lib/supabase/service';
+import { GitHubPRsPanel } from './github-prs-panel';
+import type { GitHubPR } from '@/app/actions/github-sync';
+
+export default async function GitHubPRsWrapper({
+  userId,
+  githubHandle,
+}: {
+  userId: string;
+  githubHandle: string;
+}) {
+  const service = getServiceSupabase();
+  if (!service) return null;
+
+  // Query pull_requests directly (populated by webhooks)
+  const { data: prsData } = await service
+    .from('pull_requests')
+    .select(
+      'id, github_pr_id, repo_full_name, number, title, state, url, github_created_at, merged_at',
+    )
+    .eq('author_user_id', userId)
+    .order('github_created_at', { ascending: false });
+
+  const prs = (prsData ?? []) as GitHubPR[];
+
+  // Active Issues: claimed recommendations only
+  const { data: claimedRecs } = await service
+    .from('recommendations')
+    .select(
+      `
+      id,
+      status,
+      xp_reward,
+      linked_pr_url,
+      difficulty,
+      issues (
+        title,
+        repo_full_name,
+        url
+      )
+    `,
+    )
+    .eq('user_id', userId)
+    .eq('status', 'claimed')
+    .limit(2);
+
+  const claimedPrUrls = (claimedRecs ?? [])
+    .map((r: any) => r.linked_pr_url)
+    .filter(Boolean) as string[];
+
+  return <GitHubPRsPanel prs={prs} claimedPrUrls={claimedPrUrls} githubHandle={githubHandle} />;
+}
+
+export function PrsSkeleton() {
+  return (
+    <section>
+      <div className="mb-6 flex items-center justify-between border-b border-[#2d333b] pb-4">
+        <h2 className="text-[11px] uppercase tracking-widest text-zinc-500">MY PRS</h2>
+        <div className="flex gap-4">
+          <div className="h-7 w-20 animate-pulse bg-zinc-800" />
+          <div className="h-4 w-16 animate-pulse bg-zinc-800" />
+        </div>
+      </div>
+      <div className="space-y-6">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="border-b border-[#2d333b] pb-6 last:border-0">
+            <div className="mb-2 h-5 w-3/4 animate-pulse bg-zinc-800" />
+            <div className="mb-3 h-3 w-1/2 animate-pulse bg-zinc-800" />
+            <div className="h-5 w-16 animate-pulse bg-zinc-800" />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}