Add loading spinners for uncached pages and fix UI polish issues (#48)

- Add pendingComponent to list routes (overview, pulls, issues, reviews) so a spinner shows while loaders fetch data on cold loads
- Set defaultPendingMs: 0 on the router for instant pending UI
- Simplify component loading fallbacks to show spinner during SSR-to-hydration gap
- Prefetch viewer query in pull detail loader to prevent review-requested banner layout shift
- Remove double border on review page resizable panel handle

Author: stylessh

apps/dashboard/src/components/pulls/review/review-page.tsx

@@ -303,12 +303,7 @@ export function ReviewPage() {
 			</div>
 
 			<ResizablePanelGroup direction="horizontal" className="flex-1">
-				<ResizablePanel
-					defaultSize={20}
-					minSize={12}
-					maxSize={40}
-					className="border-r"
-				>
+				<ResizablePanel defaultSize={20} minSize={12} maxSize={40}>
 					<div className="flex h-full flex-col">
 						<div className="px-3 py-2">
 							<div className="relative flex items-center rounded-md border bg-surface-0 px-2.5 py-1.5">

apps/dashboard/src/router.tsx

@@ -16,6 +16,7 @@ export function getRouter() {
 		scrollRestoration: true,
 		defaultPreload: "intent",
 		defaultPreloadStaleTime: 0,
+		defaultPendingMs: 0,
 		Wrap: ({ children }) => (
 			<AppQueryClientProvider queryClient={queryClient}>
 				{children}

apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx

@@ -1,6 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { PullDetailPage } from "#/components/pulls/detail/pull-detail-page";
-import { githubPullPageQueryOptions } from "#/lib/github.query";
+import {
+	githubPullPageQueryOptions,
+	githubViewerQueryOptions,
+} from "#/lib/github.query";
 import { buildSeo, formatPageTitle, summarizeText } from "#/lib/seo";
 
 export const Route = createFileRoute("/_protected/$owner/$repo/pull/$pullId")({
@@ -15,10 +18,15 @@ export const Route = createFileRoute("/_protected/$owner/$repo/pull/$pullId")({
 
 		const cachedData = context.queryClient.getQueryData(pageOptions.queryKey);
 		if (cachedData !== undefined) {
+			void context.queryClient.ensureQueryData(githubViewerQueryOptions(scope));
 			return cachedData;
 		}
 
-		return context.queryClient.ensureQueryData(pageOptions);
+		const [pageData] = await Promise.all([
+			context.queryClient.ensureQueryData(pageOptions),
+			context.queryClient.ensureQueryData(githubViewerQueryOptions(scope)),
+		]);
+		return pageData;
 	},
 	head: ({ loaderData, match, params }) => {
 		const pull = loaderData?.detail;

apps/dashboard/src/routes/_protected/index.tsx

@@ -14,12 +14,12 @@ import { useHasMounted } from "#/lib/use-has-mounted";
 export const Route = createFileRoute("/_protected/")({
 	loader: async ({ context }) => {
 		const scope = { userId: context.user.id };
-
 		await Promise.all([
 			context.queryClient.ensureQueryData(githubMyPullsQueryOptions(scope)),
 			context.queryClient.ensureQueryData(githubMyIssuesQueryOptions(scope)),
 		]);
 	},
+	pendingComponent: DashboardContentLoading,
 	head: ({ match }) =>
 		buildSeo({
 			path: match.pathname,
@@ -110,11 +110,7 @@ function OverviewPage() {
 		);
 	}
 
-	if (hasMounted && (pullsQuery.isPending || issuesQuery.isPending)) {
-		return <DashboardContentLoading />;
-	}
-
-	return null;
+	return <DashboardContentLoading />;
 }
 
 type MetricCardProps = {

apps/dashboard/src/routes/_protected/issues.tsx

@@ -23,6 +23,7 @@ export const Route = createFileRoute("/_protected/issues")({
 			githubMyIssuesQueryOptions(scope),
 		);
 	},
+	pendingComponent: DashboardContentLoading,
 	head: ({ match }) =>
 		buildSeo({
 			path: match.pathname,
@@ -113,11 +114,7 @@ function IssuesPage() {
 			</div>
 		);
 	}
-	if (hasMounted && query.isPending) {
-		return <DashboardContentLoading />;
-	}
-
-	return null;
+	return <DashboardContentLoading />;
 }
 
 type IssueGroupData = {

apps/dashboard/src/routes/_protected/pulls.tsx

@@ -27,6 +27,7 @@ export const Route = createFileRoute("/_protected/pulls")({
 		const scope = { userId: context.user.id };
 		await context.queryClient.ensureQueryData(githubMyPullsQueryOptions(scope));
 	},
+	pendingComponent: DashboardContentLoading,
 	head: ({ match }) =>
 		buildSeo({
 			path: match.pathname,
@@ -135,11 +136,7 @@ function PullRequestsPage() {
 			</div>
 		);
 	}
-	if (hasMounted && query.isPending) {
-		return <DashboardContentLoading />;
-	}
-
-	return null;
+	return <DashboardContentLoading />;
 }
 
 type PullGroupData = {

apps/dashboard/src/routes/_protected/reviews.tsx

@@ -13,6 +13,7 @@ export const Route = createFileRoute("/_protected/reviews")({
 		const scope = { userId: context.user.id };
 		await context.queryClient.ensureQueryData(githubMyPullsQueryOptions(scope));
 	},
+	pendingComponent: DashboardContentLoading,
 	head: ({ match }) =>
 		buildSeo({
 			path: match.pathname,
@@ -80,9 +81,5 @@ function ReviewsPage() {
 			</div>
 		);
 	}
-	if (hasMounted && query.isPending) {
-		return <DashboardContentLoading />;
-	}
-
-	return null;
+	return <DashboardContentLoading />;
 }