Fix detail pages hanging on Cloudflare Workers

apps/dashboard/src/routes/_protected/$owner/$repo/issues.$issueId.tsx

@@ -1,26 +1,23 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { IssueDetailPage } from "#/components/issues/detail/issue-detail-page";
+import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
 import { githubIssuePageQueryOptions } from "#/lib/github.query";
 import { buildSeo, formatPageTitle, summarizeText } from "#/lib/seo";
 
 export const Route = createFileRoute(
 	"/_protected/$owner/$repo/issues/$issueId",
 )({
-	loader: async ({ context, params }) => {
+	loader: ({ context, params }) => {
 		const issueNumber = Number(params.issueId);
 		const scope = { userId: context.user.id };
-		const pageOptions = githubIssuePageQueryOptions(scope, {
-			owner: params.owner,
-			repo: params.repo,
-			issueNumber,
-		});
-
-		const cachedData = context.queryClient.getQueryData(pageOptions.queryKey);
-		if (cachedData !== undefined) {
-			return cachedData;
-		}
 
-		return context.queryClient.ensureQueryData(pageOptions);
+		return context.queryClient.getQueryData(
+			githubIssuePageQueryOptions(scope, {
+				owner: params.owner,
+				repo: params.repo,
+				issueNumber,
+			}).queryKey,
+		);
 	},
 	head: ({ loaderData, match, params }) => {
 		const issue = loaderData?.detail;
@@ -40,5 +37,6 @@ export const Route = createFileRoute(
 			robots: "noindex",
 		});
 	},
+	pendingComponent: DashboardContentLoading,
 	component: IssueDetailPage,
 });

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

@@ -1,32 +1,21 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
 import { PullDetailPage } from "#/components/pulls/detail/pull-detail-page";
-import {
-	githubPullPageQueryOptions,
-	githubViewerQueryOptions,
-} from "#/lib/github.query";
+import { githubPullPageQueryOptions } from "#/lib/github.query";
 import { buildSeo, formatPageTitle, summarizeText } from "#/lib/seo";
 
 export const Route = createFileRoute("/_protected/$owner/$repo/pull/$pullId")({
-	loader: async ({ context, params }) => {
+	loader: ({ context, params }) => {
 		const pullNumber = Number(params.pullId);
 		const scope = { userId: context.user.id };
-		const pageOptions = githubPullPageQueryOptions(scope, {
-			owner: params.owner,
-			repo: params.repo,
-			pullNumber,
-		});
-
-		const cachedData = context.queryClient.getQueryData(pageOptions.queryKey);
-		if (cachedData !== undefined) {
-			void context.queryClient.ensureQueryData(githubViewerQueryOptions(scope));
-			return cachedData;
-		}
 
-		const [pageData] = await Promise.all([
-			context.queryClient.ensureQueryData(pageOptions),
-			context.queryClient.ensureQueryData(githubViewerQueryOptions(scope)),
-		]);
-		return pageData;
+		return context.queryClient.getQueryData(
+			githubPullPageQueryOptions(scope, {
+				owner: params.owner,
+				repo: params.repo,
+				pullNumber,
+			}).queryKey,
+		);
 	},
 	head: ({ loaderData, match, params }) => {
 		const pull = loaderData?.detail;
@@ -46,5 +35,6 @@ export const Route = createFileRoute("/_protected/$owner/$repo/pull/$pullId")({
 			robots: "noindex",
 		});
 	},
+	pendingComponent: DashboardContentLoading,
 	component: PullDetailPage,
 });

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

@@ -1,54 +1,31 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
 import { ReviewPage } from "#/components/pulls/review/review-page";
-import { getPullFiles } from "#/lib/github.functions";
 import {
 	githubPullFileSummariesQueryOptions,
 	githubPullPageQueryOptions,
-	githubQueryKeys,
 } from "#/lib/github.query";
 import { buildSeo, formatPageTitle, summarizeText } from "#/lib/seo";
 
-const PULL_FILES_PAGE_SIZE = 25;
-
 export const Route = createFileRoute("/_protected/$owner/$repo/review/$pullId")(
 	{
-		loader: async ({ context, params }) => {
+		loader: ({ context, params }) => {
 			const pullNumber = Number(params.pullId);
 			const scope = { userId: context.user.id };
 			const input = { owner: params.owner, repo: params.repo, pullNumber };
-			const pageOptions = githubPullPageQueryOptions(scope, input);
-			const fileSummariesOptions = githubPullFileSummariesQueryOptions(
-				scope,
-				input,
-			);
 
 			const cachedPageData = context.queryClient.getQueryData(
-				pageOptions.queryKey,
+				githubPullPageQueryOptions(scope, input).queryKey,
 			);
 			const cachedFileSummaries = context.queryClient.getQueryData(
-				fileSummariesOptions.queryKey,
+				githubPullFileSummariesQueryOptions(scope, input).queryKey,
 			);
 
-			// Check if infinite query already has data
-			const filesQueryKey = githubQueryKeys.pulls.files(scope, input);
-			const cachedFilesData = context.queryClient.getQueryData(filesQueryKey);
-
-			const [pageData, fileSummaries, firstFilesPage] = await Promise.all([
-				cachedPageData ?? context.queryClient.ensureQueryData(pageOptions),
-				cachedFileSummaries ??
-					context.queryClient.ensureQueryData(fileSummariesOptions),
-				cachedFilesData
-					? null
-					: getPullFiles({
-							data: {
-								...input,
-								page: 1,
-								perPage: PULL_FILES_PAGE_SIZE,
-							},
-						}),
-			]);
-
-			return { pageData, fileSummaries, firstFilesPage };
+			return {
+				pageData: cachedPageData ?? null,
+				fileSummaries: cachedFileSummaries ?? null,
+				firstFilesPage: null,
+			};
 		},
 		head: ({ loaderData, match, params }) => {
 			const pull = loaderData?.pageData?.detail;
@@ -68,6 +45,7 @@ export const Route = createFileRoute("/_protected/$owner/$repo/review/$pullId")(
 				robots: "noindex",
 			});
 		},
+		pendingComponent: DashboardContentLoading,
 		component: ReviewPage,
 	},
 );