{navItems.map((item) => (
))}
diff --git a/apps/dashboard/src/lib/use-has-mounted.ts b/apps/dashboard/src/lib/use-has-mounted.ts
new file mode 100644
index 0000000..0039021
--- /dev/null
+++ b/apps/dashboard/src/lib/use-has-mounted.ts
@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+
+export function useHasMounted() {
+ const [hasMounted, setHasMounted] = useState(false);
+
+ useEffect(() => {
+ setHasMounted(true);
+ }, []);
+
+ return hasMounted;
+}
diff --git a/apps/dashboard/src/routeTree.gen.ts b/apps/dashboard/src/routeTree.gen.ts
index 7c52bf7..f25d007 100644
--- a/apps/dashboard/src/routeTree.gen.ts
+++ b/apps/dashboard/src/routeTree.gen.ts
@@ -13,7 +13,7 @@ import { Route as LoginRouteImport } from './routes/login'
import { Route as ProtectedRouteImport } from './routes/_protected'
import { Route as ProtectedIndexRouteImport } from './routes/_protected/index'
import { Route as ProtectedReviewsRouteImport } from './routes/_protected/reviews'
-import { Route as ProtectedPullRequestsRouteImport } from './routes/_protected/pull-requests'
+import { Route as ProtectedPullsRouteImport } from './routes/_protected/pulls'
import { Route as ProtectedIssuesRouteImport } from './routes/_protected/issues'
import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
@@ -36,9 +36,9 @@ const ProtectedReviewsRoute = ProtectedReviewsRouteImport.update({
path: '/reviews',
getParentRoute: () => ProtectedRoute,
} as any)
-const ProtectedPullRequestsRoute = ProtectedPullRequestsRouteImport.update({
- id: '/pull-requests',
- path: '/pull-requests',
+const ProtectedPullsRoute = ProtectedPullsRouteImport.update({
+ id: '/pulls',
+ path: '/pulls',
getParentRoute: () => ProtectedRoute,
} as any)
const ProtectedIssuesRoute = ProtectedIssuesRouteImport.update({
@@ -56,14 +56,14 @@ export interface FileRoutesByFullPath {
'/': typeof ProtectedIndexRoute
'/login': typeof LoginRoute
'/issues': typeof ProtectedIssuesRoute
- '/pull-requests': typeof ProtectedPullRequestsRoute
+ '/pulls': typeof ProtectedPullsRoute
'/reviews': typeof ProtectedReviewsRoute
'/api/auth/$': typeof ApiAuthSplatRoute
}
export interface FileRoutesByTo {
'/login': typeof LoginRoute
'/issues': typeof ProtectedIssuesRoute
- '/pull-requests': typeof ProtectedPullRequestsRoute
+ '/pulls': typeof ProtectedPullsRoute
'/reviews': typeof ProtectedReviewsRoute
'/': typeof ProtectedIndexRoute
'/api/auth/$': typeof ApiAuthSplatRoute
@@ -73,28 +73,22 @@ export interface FileRoutesById {
'/_protected': typeof ProtectedRouteWithChildren
'/login': typeof LoginRoute
'/_protected/issues': typeof ProtectedIssuesRoute
- '/_protected/pull-requests': typeof ProtectedPullRequestsRoute
+ '/_protected/pulls': typeof ProtectedPullsRoute
'/_protected/reviews': typeof ProtectedReviewsRoute
'/_protected/': typeof ProtectedIndexRoute
'/api/auth/$': typeof ApiAuthSplatRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
- fullPaths:
- | '/'
- | '/login'
- | '/issues'
- | '/pull-requests'
- | '/reviews'
- | '/api/auth/$'
+ fullPaths: '/' | '/login' | '/issues' | '/pulls' | '/reviews' | '/api/auth/$'
fileRoutesByTo: FileRoutesByTo
- to: '/login' | '/issues' | '/pull-requests' | '/reviews' | '/' | '/api/auth/$'
+ to: '/login' | '/issues' | '/pulls' | '/reviews' | '/' | '/api/auth/$'
id:
| '__root__'
| '/_protected'
| '/login'
| '/_protected/issues'
- | '/_protected/pull-requests'
+ | '/_protected/pulls'
| '/_protected/reviews'
| '/_protected/'
| '/api/auth/$'
@@ -136,11 +130,11 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof ProtectedReviewsRouteImport
parentRoute: typeof ProtectedRoute
}
- '/_protected/pull-requests': {
- id: '/_protected/pull-requests'
- path: '/pull-requests'
- fullPath: '/pull-requests'
- preLoaderRoute: typeof ProtectedPullRequestsRouteImport
+ '/_protected/pulls': {
+ id: '/_protected/pulls'
+ path: '/pulls'
+ fullPath: '/pulls'
+ preLoaderRoute: typeof ProtectedPullsRouteImport
parentRoute: typeof ProtectedRoute
}
'/_protected/issues': {
@@ -162,14 +156,14 @@ declare module '@tanstack/react-router' {
interface ProtectedRouteChildren {
ProtectedIssuesRoute: typeof ProtectedIssuesRoute
- ProtectedPullRequestsRoute: typeof ProtectedPullRequestsRoute
+ ProtectedPullsRoute: typeof ProtectedPullsRoute
ProtectedReviewsRoute: typeof ProtectedReviewsRoute
ProtectedIndexRoute: typeof ProtectedIndexRoute
}
const ProtectedRouteChildren: ProtectedRouteChildren = {
ProtectedIssuesRoute: ProtectedIssuesRoute,
- ProtectedPullRequestsRoute: ProtectedPullRequestsRoute,
+ ProtectedPullsRoute: ProtectedPullsRoute,
ProtectedReviewsRoute: ProtectedReviewsRoute,
ProtectedIndexRoute: ProtectedIndexRoute,
}
diff --git a/apps/dashboard/src/routes/_protected/index.tsx b/apps/dashboard/src/routes/_protected/index.tsx
index 89c1e53..c8b3e61 100644
--- a/apps/dashboard/src/routes/_protected/index.tsx
+++ b/apps/dashboard/src/routes/_protected/index.tsx
@@ -1,118 +1,152 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
import {
githubMyIssuesQueryOptions,
githubMyPullsQueryOptions,
githubUserReposQueryOptions,
githubViewerQueryOptions,
} from "#/lib/github.query";
+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(githubViewerQueryOptions(scope)),
- context.queryClient.ensureQueryData(githubUserReposQueryOptions(scope)),
- context.queryClient.ensureQueryData(githubMyPullsQueryOptions(scope)),
- context.queryClient.ensureQueryData(githubMyIssuesQueryOptions(scope)),
- ]);
- },
component: OverviewPage,
});
function OverviewPage() {
const { user } = Route.useRouteContext();
const scope = { userId: user.id };
- const { data: viewer } = useSuspenseQuery(githubViewerQueryOptions(scope));
- const { data: repos } = useSuspenseQuery(githubUserReposQueryOptions(scope));
- const { data: pulls } = useSuspenseQuery(githubMyPullsQueryOptions(scope));
- const { data: issues } = useSuspenseQuery(githubMyIssuesQueryOptions(scope));
+ const hasMounted = useHasMounted();
+ const viewerQuery = useQuery({
+ ...githubViewerQueryOptions(scope),
+ enabled: hasMounted,
+ });
+ const reposQuery = useQuery({
+ ...githubUserReposQueryOptions(scope),
+ enabled: hasMounted,
+ });
+ const pullsQuery = useQuery({
+ ...githubMyPullsQueryOptions(scope),
+ enabled: hasMounted,
+ });
+ const issuesQuery = useQuery({
+ ...githubMyIssuesQueryOptions(scope),
+ enabled: hasMounted,
+ });
- const pullCount =
- pulls.reviewRequested.length +
- pulls.assigned.length +
- pulls.authored.length +
- pulls.mentioned.length +
- pulls.involved.length;
- const issueCount =
- issues.assigned.length + issues.authored.length + issues.mentioned.length;
+ if (viewerQuery.error) throw viewerQuery.error;
+ if (reposQuery.error) throw reposQuery.error;
+ if (pullsQuery.error) throw pullsQuery.error;
+ if (issuesQuery.error) throw issuesQuery.error;
- return (
-
-
-
- GitHub cache primed
-
-
- {viewer?.name ?? viewer?.login ?? user.name ?? user.email}
-
-
- Overview is preloading your viewer, repo, pull request, and issue
- queries so the next tabs feel instant.
-
-
+ if (
+ viewerQuery.data &&
+ reposQuery.data &&
+ pullsQuery.data &&
+ issuesQuery.data
+ ) {
+ const viewer = viewerQuery.data;
+ const repos = reposQuery.data;
+ const pulls = pullsQuery.data;
+ const issues = issuesQuery.data;
-
-
-
-
-
+ const pullCount =
+ pulls.reviewRequested.length +
+ pulls.assigned.length +
+ pulls.authored.length +
+ pulls.mentioned.length +
+ pulls.involved.length;
+ const issueCount =
+ issues.assigned.length + issues.authored.length + issues.mentioned.length;
-
-
({
- id: repo.id,
- title: repo.fullName,
- description:
- repo.description ??
- `${repo.stars} stars${repo.language ? ` • ${repo.language}` : ""}`,
- }))}
- />
- ({
- id: pull.id,
- title: `#${pull.number} ${pull.title}`,
- description: pull.repository.fullName,
- }))}
- />
- ({
- id: issue.id,
- title: `#${issue.number} ${issue.title}`,
- description: issue.repository.fullName,
- }))}
- />
- ({
- id: pull.id,
- title: `#${pull.number} ${pull.title}`,
- description: pull.repository.fullName,
- }))}
- />
+ return (
+
+
+
+ GitHub cache primed
+
+
+ {viewer?.name ?? viewer?.login ?? user.name ?? user.email}
+
+
+ Overview loads your viewer, repository, pull request, and issue data
+ on demand and keeps it warm in the client cache.
+
+
+
+
+
+
+
+
+
+
+
({
+ id: repo.id,
+ title: repo.fullName,
+ description:
+ repo.description ??
+ `${repo.stars} stars${repo.language ? ` • ${repo.language}` : ""}`,
+ }))}
+ />
+ ({
+ id: pull.id,
+ title: `#${pull.number} ${pull.title}`,
+ description: pull.repository.fullName,
+ }))}
+ />
+ ({
+ id: issue.id,
+ title: `#${issue.number} ${issue.title}`,
+ description: issue.repository.fullName,
+ }))}
+ />
+ ({
+ id: pull.id,
+ title: `#${pull.number} ${pull.title}`,
+ description: pull.repository.fullName,
+ }))}
+ />
+
- );
+ );
+ }
+
+ if (
+ hasMounted &&
+ (viewerQuery.isPending ||
+ reposQuery.isPending ||
+ pullsQuery.isPending ||
+ issuesQuery.isPending)
+ ) {
+ return
;
+ }
+
+ return null;
}
function SummaryCard({
diff --git a/apps/dashboard/src/routes/_protected/issues.tsx b/apps/dashboard/src/routes/_protected/issues.tsx
index 5924301..bc5807d 100644
--- a/apps/dashboard/src/routes/_protected/issues.tsx
+++ b/apps/dashboard/src/routes/_protected/issues.tsx
@@ -1,39 +1,48 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
import { githubMyIssuesQueryOptions } from "#/lib/github.query";
import type { IssueSummary } from "#/lib/github.types";
+import { useHasMounted } from "#/lib/use-has-mounted";
export const Route = createFileRoute("/_protected/issues")({
- loader: async ({ context }) => {
- await context.queryClient.ensureQueryData(
- githubMyIssuesQueryOptions({ userId: context.user.id }),
- );
- },
component: IssuesPage,
});
function IssuesPage() {
const { user } = Route.useRouteContext();
- const { data } = useSuspenseQuery(
- githubMyIssuesQueryOptions({ userId: user.id }),
- );
+ const hasMounted = useHasMounted();
+ const query = useQuery({
+ ...githubMyIssuesQueryOptions({ userId: user.id }),
+ enabled: hasMounted,
+ });
- return (
-
-
-
- Cached issue groups
-
- Issues
-
+ if (query.error) throw query.error;
+ if (query.data) {
+ const data = query.data;
+
+ return (
+
+
+
+ Cached issue groups
+
+ Issues
+
-
-
- );
+ );
+ }
+ if (hasMounted && query.isPending) {
+ return
;
+ }
+
+ return null;
}
function IssueGroup({
diff --git a/apps/dashboard/src/routes/_protected/pull-requests.tsx b/apps/dashboard/src/routes/_protected/pull-requests.tsx
deleted file mode 100644
index 8f3c24c..0000000
--- a/apps/dashboard/src/routes/_protected/pull-requests.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
-import { githubMyPullsQueryOptions } from "#/lib/github.query";
-import type { PullSummary } from "#/lib/github.types";
-
-export const Route = createFileRoute("/_protected/pull-requests")({
- loader: async ({ context }) => {
- await context.queryClient.ensureQueryData(
- githubMyPullsQueryOptions({ userId: context.user.id }),
- );
- },
- component: PullRequestsPage,
-});
-
-function PullRequestsPage() {
- const { user } = Route.useRouteContext();
- const { data } = useSuspenseQuery(
- githubMyPullsQueryOptions({ userId: user.id }),
- );
-
- return (
-
- );
-}
-
-function PullGroup({ title, pulls }: { title: string; pulls: PullSummary[] }) {
- return (
-
-
-
{title}
- {pulls.length}
-
- {pulls.length === 0 ? (
-
- No pull requests in this slice.
-
- ) : (
-
- {pulls.map((pull) => (
-
-
- #{pull.number} {pull.title}
-
-
- {pull.repository.fullName}
-
-
- ))}
-
- );
-}
diff --git a/apps/dashboard/src/routes/_protected/pulls.tsx b/apps/dashboard/src/routes/_protected/pulls.tsx
new file mode 100644
index 0000000..1f8a866
--- /dev/null
+++ b/apps/dashboard/src/routes/_protected/pulls.tsx
@@ -0,0 +1,79 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
+import { githubMyPullsQueryOptions } from "#/lib/github.query";
+import type { PullSummary } from "#/lib/github.types";
+import { useHasMounted } from "#/lib/use-has-mounted";
+
+export const Route = createFileRoute("/_protected/pulls")({
+ component: PullRequestsPage,
+});
+
+function PullRequestsPage() {
+ const { user } = Route.useRouteContext();
+ const hasMounted = useHasMounted();
+ const query = useQuery({
+ ...githubMyPullsQueryOptions({ userId: user.id }),
+ enabled: hasMounted,
+ });
+
+ if (query.error) throw query.error;
+ if (query.data) {
+ const data = query.data;
+
+ return (
+
+ );
+ }
+ if (hasMounted && query.isPending) {
+ return
;
+ }
+
+ return null;
+}
+
+function PullGroup({ title, pulls }: { title: string; pulls: PullSummary[] }) {
+ return (
+
+
+
{title}
+ {pulls.length}
+
+ {pulls.length === 0 ? (
+
+ No pull requests in this slice.
+
+ ) : (
+
+ {pulls.map((pull) => (
+
+
+ #{pull.number} {pull.title}
+
+
+ {pull.repository.fullName}
+
+
+ ))}
+
+ );
+}
diff --git a/apps/dashboard/src/routes/_protected/reviews.tsx b/apps/dashboard/src/routes/_protected/reviews.tsx
index 1757c37..01a29be 100644
--- a/apps/dashboard/src/routes/_protected/reviews.tsx
+++ b/apps/dashboard/src/routes/_protected/reviews.tsx
@@ -1,57 +1,66 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
+import { DashboardContentLoading } from "#/components/layouts/dashboard-content-loading";
import { githubMyPullsQueryOptions } from "#/lib/github.query";
+import { useHasMounted } from "#/lib/use-has-mounted";
export const Route = createFileRoute("/_protected/reviews")({
- loader: async ({ context }) => {
- await context.queryClient.ensureQueryData(
- githubMyPullsQueryOptions({ userId: context.user.id }),
- );
- },
component: ReviewsPage,
});
function ReviewsPage() {
const { user } = Route.useRouteContext();
- const { data } = useSuspenseQuery(
- githubMyPullsQueryOptions({ userId: user.id }),
- );
+ const hasMounted = useHasMounted();
+ const query = useQuery({
+ ...githubMyPullsQueryOptions({ userId: user.id }),
+ enabled: hasMounted,
+ });
- return (
-
-
+ if (query.error) throw query.error;
+ if (query.data) {
+ const data = query.data;
-
-
-
Requested reviews
-
- {data.reviewRequested.length}
-
-
- {data.reviewRequested.length === 0 ? (
-
- No review requests found.
+ return (
+
+
+
+ Review requests stay warm in the shared pull request cache.
- ) : (
-
- {data.reviewRequested.map((pull) => (
-
-
- #{pull.number} {pull.title}
-
-
- {pull.repository.fullName}
-
-
- ))}
+
Reviews
+
+
+
+
+
Requested reviews
+
+ {data.reviewRequested.length}
+
- )}
-
-
+ No review requests found.
+
+ ) : (
+
+ {data.reviewRequested.map((pull) => (
+
+
+ #{pull.number} {pull.title}
+
+
+ {pull.repository.fullName}
+
+
+ ))}
+