- {commentsQuery.data.map((comment, i) => (
+ {comments.map((comment, i) => (
-
+
{/* Milestone */}
@@ -438,3 +442,73 @@ function CommentBox() {
);
}
+
+function IssueDetailPageSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {["activity-1", "activity-2", "activity-3"].map((key) => (
+
+ ))}
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx b/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
index 5f4abf7..94422b2 100644
--- a/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
+++ b/apps/dashboard/src/routes/_protected/$owner/$repo/pull.$pullId.tsx
@@ -16,19 +16,37 @@ import { cn } from "@quickhub/ui/lib/utils";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
-import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
import { formatRelativeTime } from "#/components/pulls/pull-request-row";
import { updatePullBranch } from "#/lib/github.functions";
import {
- githubPullCommentsQueryOptions,
- githubPullDetailQueryOptions,
+ githubPullPageQueryOptions,
githubPullStatusQueryOptions,
} from "#/lib/github.query";
import type { GitHubActor, PullDetail, PullStatus } from "#/lib/github.types";
+import { githubCachePolicy } from "#/lib/github-cache-policy";
import { useHasMounted } from "#/lib/use-has-mounted";
import { useRegisterTab } from "#/lib/use-register-tab";
export const Route = createFileRoute("/_protected/$owner/$repo/pull/$pullId")({
+ loader: async ({ 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 primeQuery = (options: { queryKey: readonly unknown[] }) => {
+ if (context.queryClient.getQueryData(options.queryKey) !== undefined) {
+ return Promise.resolve();
+ }
+
+ return context.queryClient.ensureQueryData(options);
+ };
+
+ await Promise.all([primeQuery(pageOptions)]);
+ },
component: PullDetailPage,
});
@@ -72,22 +90,21 @@ function PullDetailPage() {
const scope = { userId: user.id };
const hasMounted = useHasMounted();
- const detailQuery = useQuery({
- ...githubPullDetailQueryOptions(scope, { owner, repo, pullNumber }),
+ const pageQuery = useQuery({
+ ...githubPullPageQueryOptions(scope, { owner, repo, pullNumber }),
enabled: hasMounted,
});
- const commentsQuery = useQuery({
- ...githubPullCommentsQueryOptions(scope, { owner, repo, pullNumber }),
- enabled: hasMounted && detailQuery.data != null,
- });
-
const statusQuery = useQuery({
...githubPullStatusQueryOptions(scope, { owner, repo, pullNumber }),
- enabled: hasMounted && detailQuery.data != null,
+ enabled: hasMounted && pageQuery.data?.detail != null,
+ refetchOnWindowFocus: "always",
+ refetchInterval: githubCachePolicy.status.staleTimeMs,
});
- const pr = detailQuery.data;
+ const pr = pageQuery.data?.detail;
+ const comments = pageQuery.data?.comments;
+ const status = statusQuery.data ?? null;
useRegisterTab(
pr
@@ -102,13 +119,8 @@ function PullDetailPage() {
: null,
);
- if (detailQuery.error) throw detailQuery.error;
-
- if (hasMounted && detailQuery.isPending) {
- return
;
- }
-
- if (!pr) return null;
+ if (pageQuery.error) throw pageQuery.error;
+ if (!pr) return
;
const stateConfig = getPrStateConfig(pr);
const StateIcon = stateConfig.icon;
@@ -242,14 +254,14 @@ function PullDetailPage() {
Activity
- {commentsQuery.data && (
+ {comments && (
- {commentsQuery.data.length}
+ {comments.length}
)}
- {commentsQuery.isFetching && !commentsQuery.data && (
+ {pageQuery.isFetching && !comments && (