diff --git a/app/client/modules/repositories/components/compression-stats-chart.tsx b/app/client/modules/repositories/components/compression-stats-chart.tsx index 74996c78..4187863e 100644 --- a/app/client/modules/repositories/components/compression-stats-chart.tsx +++ b/app/client/modules/repositories/components/compression-stats-chart.tsx @@ -3,9 +3,11 @@ import { Archive } from "lucide-react"; import { getRepositoryStatsOptions } from "~/client/api-client/@tanstack/react-query.gen"; import { ByteSize } from "~/client/components/bytes-size"; import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card"; +import type { GetRepositoryStatsResponse } from "~/client/api-client/types.gen"; type Props = { repositoryShortId: string; + initialStats?: GetRepositoryStatsResponse; }; const toSafeNumber = (value: number | undefined) => { @@ -16,14 +18,15 @@ const toSafeNumber = (value: number | undefined) => { return Math.max(0, value); }; -export function CompressionStatsChart({ repositoryShortId }: Props) { +export function CompressionStatsChart({ repositoryShortId, initialStats }: Props) { const { data: stats, - isLoading, + isPending, error, } = useQuery({ ...getRepositoryStatsOptions({ path: { shortId: repositoryShortId } }), retry: false, + initialData: initialStats, }); const storedSize = toSafeNumber(stats?.total_size); @@ -40,7 +43,7 @@ export function CompressionStatsChart({ repositoryShortId }: Props) { const hasStats = !!stats && (storedSize > 0 || uncompressedSize > 0 || snapshotsCount > 0); - if (isLoading) { + if (isPending) { return (

Loading compression statistics...

diff --git a/app/client/modules/repositories/routes/repository-details.tsx b/app/client/modules/repositories/routes/repository-details.tsx index 8841c1e7..b34087b2 100644 --- a/app/client/modules/repositories/routes/repository-details.tsx +++ b/app/client/modules/repositories/routes/repository-details.tsx @@ -6,15 +6,18 @@ import { RepositoryInfoTabContent } from "../tabs/info"; import { RepositorySnapshotsTabContent } from "../tabs/snapshots"; import { useNavigate, useSearch } from "@tanstack/react-router"; import type { BackupSchedule, Snapshot } from "~/client/lib/types"; +import type { GetRepositoryStatsResponse } from "~/client/api-client/types.gen"; export default function RepositoryDetailsPage({ repositoryId, initialSnapshots, initialBackupSchedules, + initialStats, }: { repositoryId: string; initialSnapshots?: Snapshot[]; initialBackupSchedules?: BackupSchedule[]; + initialStats?: GetRepositoryStatsResponse; }) { const navigate = useNavigate(); const { tab } = useSearch({ from: "/(dashboard)/repositories/$repositoryId/" }); @@ -32,7 +35,7 @@ export default function RepositoryDetailsPage({ Snapshots - + diff --git a/app/client/modules/repositories/tabs/info.tsx b/app/client/modules/repositories/tabs/info.tsx index f8567a7b..e33838e0 100644 --- a/app/client/modules/repositories/tabs/info.tsx +++ b/app/client/modules/repositories/tabs/info.tsx @@ -14,6 +14,7 @@ import { AlertDialogTitle, } from "~/client/components/ui/alert-dialog"; import type { Repository } from "~/client/lib/types"; +import type { GetRepositoryStatsResponse } from "~/client/api-client/types.gen"; import { formatDateTime, formatTimeAgo } from "~/client/lib/datetime"; import { cancelDoctorMutation, @@ -30,6 +31,7 @@ import { cn } from "~/client/lib/utils"; type Props = { repository: Repository; + initialStats?: GetRepositoryStatsResponse; }; const getEffectiveLocalPath = (repository: Repository): string | null => { @@ -37,7 +39,7 @@ const getEffectiveLocalPath = (repository: Repository): string | null => { return repository.config.path; }; -export const RepositoryInfoTabContent = ({ repository }: Props) => { +export const RepositoryInfoTabContent = ({ repository, initialStats }: Props) => { const [showDeleteConfirm, setShowDeleteConfirm] = useState(false); const navigate = useNavigate(); @@ -232,7 +234,7 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
- + diff --git a/app/router.tsx b/app/router.tsx index 6a18beb2..3cb7f74b 100644 --- a/app/router.tsx +++ b/app/router.tsx @@ -32,7 +32,7 @@ export function getRouter() { routeTree, context: { queryClient }, defaultPreload: "intent", - scrollRestoration: true, + scrollRestoration: false, }); setupRouterSsrQueryIntegration({ router, diff --git a/app/routes/(dashboard)/repositories/$repositoryId/index.tsx b/app/routes/(dashboard)/repositories/$repositoryId/index.tsx index ef232965..86c5c125 100644 --- a/app/routes/(dashboard)/repositories/$repositoryId/index.tsx +++ b/app/routes/(dashboard)/repositories/$repositoryId/index.tsx @@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router"; import { type } from "arktype"; import { getRepositoryOptions, + getRepositoryStatsOptions, listBackupSchedulesOptions, listSnapshotsOptions, } from "~/client/api-client/@tanstack/react-query.gen"; @@ -14,17 +15,20 @@ export const Route = createFileRoute("/(dashboard)/repositories/$repositoryId/") loader: async ({ params, context }) => { const snapshotOptions = listSnapshotsOptions({ path: { shortId: params.repositoryId } }); const schedulesOptions = listBackupSchedulesOptions(); + const statsOptions = getRepositoryStatsOptions({ path: { shortId: params.repositoryId } }); const [res] = await Promise.all([ context.queryClient.ensureQueryData(getRepositoryOptions({ path: { shortId: params.repositoryId } })), prefetchOrSkip(context.queryClient, snapshotOptions), prefetchOrSkip(context.queryClient, schedulesOptions), + prefetchOrSkip(context.queryClient, statsOptions), ]); return { ...res, snapshots: context.queryClient.getQueryData(snapshotOptions.queryKey), backupSchedules: context.queryClient.getQueryData(schedulesOptions.queryKey), + stats: context.queryClient.getQueryData(statsOptions.queryKey), }; }, validateSearch: type({ tab: "string?" }), @@ -47,13 +51,14 @@ export const Route = createFileRoute("/(dashboard)/repositories/$repositoryId/") function RouteComponent() { const { repositoryId } = Route.useParams(); - const { snapshots, backupSchedules } = Route.useLoaderData(); + const { snapshots, backupSchedules, stats } = Route.useLoaderData(); return ( ); }