fix: lazy load repository stats on-demand

The repositories page was eagerly fetching restic stats on every page load,
which causes high CPU/Memory usage for large repositories (especially multi-TB
Backblaze repos). This fix removes the eager loading from the route loader,
so stats are now fetched on-demand by the frontend component instead.

This resolves the issue where:
- Loading the repository page would trigger restic stats immediately
- Refreshing the page would trigger additional calls to restic stats
- Resource consumption would ramp up significantly

Fixes #614
This commit is contained in:
theluckystrike 2026-03-04 22:01:54 +07:00
parent fb3c5b33c0
commit 3484d063c8

View file

@ -2,7 +2,6 @@ import { createFileRoute } from "@tanstack/react-router";
import { type } from "arktype"; import { type } from "arktype";
import { import {
getRepositoryOptions, getRepositoryOptions,
getRepositoryStatsOptions,
listBackupSchedulesOptions, listBackupSchedulesOptions,
listSnapshotsOptions, listSnapshotsOptions,
} from "~/client/api-client/@tanstack/react-query.gen"; } from "~/client/api-client/@tanstack/react-query.gen";
@ -14,20 +13,17 @@ export const Route = createFileRoute("/(dashboard)/repositories/$repositoryId/")
errorComponent: (e) => <div>{e.error.message}</div>, errorComponent: (e) => <div>{e.error.message}</div>,
loader: async ({ params, context }) => { loader: async ({ params, context }) => {
const snapshotOptions = listSnapshotsOptions({ path: { shortId: params.repositoryId } }); const snapshotOptions = listSnapshotsOptions({ path: { shortId: params.repositoryId } });
const statsOptions = getRepositoryStatsOptions({ path: { shortId: params.repositoryId } });
const [res, schedules] = await Promise.all([ const [res, schedules, snapshots] = await Promise.all([
context.queryClient.ensureQueryData(getRepositoryOptions({ path: { shortId: params.repositoryId } })), context.queryClient.ensureQueryData(getRepositoryOptions({ path: { shortId: params.repositoryId } })),
context.queryClient.ensureQueryData(listBackupSchedulesOptions()), context.queryClient.ensureQueryData(listBackupSchedulesOptions()),
prefetchOrSkip(context.queryClient, snapshotOptions), prefetchOrSkip(context.queryClient, snapshotOptions),
prefetchOrSkip(context.queryClient, statsOptions),
]); ]);
return { return {
...res, ...res,
snapshots: context.queryClient.getQueryData(snapshotOptions.queryKey), snapshots: context.queryClient.getQueryData(snapshotOptions.queryKey),
backupSchedules: schedules, backupSchedules: schedules,
stats: context.queryClient.getQueryData(statsOptions.queryKey),
}; };
}, },
validateSearch: type({ tab: "string?" }), validateSearch: type({ tab: "string?" }),
@ -50,14 +46,13 @@ export const Route = createFileRoute("/(dashboard)/repositories/$repositoryId/")
function RouteComponent() { function RouteComponent() {
const { repositoryId } = Route.useParams(); const { repositoryId } = Route.useParams();
const { snapshots, backupSchedules, stats } = Route.useLoaderData(); const { snapshots, backupSchedules } = Route.useLoaderData();
return ( return (
<RepositoryDetailsPage <RepositoryDetailsPage
repositoryId={repositoryId} repositoryId={repositoryId}
initialSnapshots={snapshots} initialSnapshots={snapshots}
initialBackupSchedules={backupSchedules} initialBackupSchedules={backupSchedules}
initialStats={stats}
/> />
); );
} }