refactor(snapshot-details): make page load faster by not awaiting restic snapshot details

app/client/components/snapshots-table.tsx

@@ -1,11 +1,10 @@
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Calendar, Clock, Database, FolderTree, HardDrive, Server, Trash2 } from "lucide-react";
+import { Calendar, Clock, Database, HardDrive, Server, Trash2 } from "lucide-react";
 import { Link, useNavigate } from "react-router";
 import { toast } from "sonner";
 import { ByteSize } from "~/client/components/bytes-size";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
 import { Button } from "~/client/components/ui/button";
 import {
 	AlertDialog,
@@ -21,6 +20,7 @@ import { formatDuration } from "~/utils/utils";
 import { deleteSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
 import { parseError } from "~/client/lib/errors";
 import type { BackupSchedule, Snapshot } from "../lib/types";
+import { cn } from "../lib/utils";
 
 type Props = {
 	snapshots: Snapshot[];
@@ -80,7 +80,6 @@ export const SnapshotsTable = ({ snapshots, repositoryId, backups }: Props) => {
 							<TableHead className="uppercase">Size</TableHead>
 							<TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead>
 							<TableHead className="uppercase hidden text-right lg:table-cell">Volume</TableHead>
-							<TableHead className="uppercase hidden text-right lg:table-cell">Paths</TableHead>
 							<TableHead className="uppercase text-right">Actions</TableHead>
 						</TableRow>
 					</TableHeader>
@@ -138,39 +137,18 @@ export const SnapshotsTable = ({ snapshots, repositoryId, backups }: Props) => {
 									</TableCell>
 									<TableCell className="hidden lg:table-cell">
 										<div className="flex items-center justify-end gap-2">
-											<Server className="h-4 w-4 text-muted-foreground" />
+											<Server className={cn("h-4 w-4 text-muted-foreground", { hidden: !backup })} />
-											{backup ? (
+											<Link
-												<Link
+												hidden={!backup}
-													to={`/volumes/${backup.volume.name}`}
+												to={backup ? `/volumes/${backup.volume.name}` : "#"}
-													onClick={(e) => e.stopPropagation()}
+												onClick={(e) => e.stopPropagation()}
-													className="text-sm hover:underline"
+												className="hover:underline"
-												>
+											>
-													{backup.volume.name}
+												<span className="text-sm">{backup ? backup.volume.name : "-"}</span>
-												</Link>
+											</Link>
-											) : (
+											<span hidden={!!backup} className="text-sm text-muted-foreground">
-												<span className="text-sm text-muted-foreground">-</span>
+												-
-											)}
+											</span>
-										</div>
-									</TableCell>
-									<TableCell className="hidden lg:table-cell">
-										<div className="flex items-center justify-end gap-2">
-											<FolderTree className="h-4 w-4 text-muted-foreground" />
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<span className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1 cursor-help">
-														{snapshot.paths.length} {snapshot.paths.length === 1 ? "path" : "paths"}
-													</span>
-												</TooltipTrigger>
-												<TooltipContent side="top" className="max-w-md">
-													<div className="flex flex-col gap-1">
-														{snapshot.paths.map((path) => (
-															<div key={`${snapshot.short_id}-${path}`} className="text-xs font-mono">
-																{path}
-															</div>
-														))}
-													</div>
-												</TooltipContent>
-											</Tooltip>
 										</div>
 									</TableCell>
 									<TableCell className="text-right">

app/client/modules/backups/components/snapshot-file-browser.tsx

@@ -8,6 +8,7 @@ import { Button, buttonVariants } from "~/client/components/ui/button";
 import type { Snapshot } from "~/client/lib/types";
 import { listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { useFileBrowser } from "~/client/hooks/use-file-browser";
+import { cn } from "~/client/lib/utils";
 
 interface Props {
 	snapshot: Snapshot;
@@ -87,7 +88,9 @@ export const SnapshotFileBrowser = (props: Props) => {
 					<div className="flex items-start justify-between">
 						<div>
 							<CardTitle>File Browser</CardTitle>
-							<CardDescription>{`Viewing snapshot from ${new Date(snapshot?.time ?? 0).toLocaleString()}`}</CardDescription>
+							<CardDescription
+								className={cn({ hidden: !snapshot.time })}
+							>{`Viewing snapshot from ${new Date(snapshot?.time ?? 0).toLocaleString()}`}</CardDescription>
 						</div>
 						<div className="flex gap-2">
 							<Link

app/client/modules/repositories/routes/snapshot-details.tsx

@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
-import { redirect, useParams, Link } from "react-router";
+import { redirect, useParams, Link, Await } from "react-router";
 import { listBackupSchedulesOptions, listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
 import { SnapshotFileBrowser } from "~/client/modules/backups/components/snapshot-file-browser";
 import { getRepository, getSnapshotDetails } from "~/client/api-client";
 import type { Route } from "./+types/snapshot-details";
+import { Suspense } from "react";
 
 export const handle = {
 	breadcrumb: (match: Route.MetaArgs) => [
@@ -25,15 +26,14 @@ export function meta({ params }: Route.MetaArgs) {
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const snapshot = await getSnapshotDetails({
+	const snapshot = getSnapshotDetails({
 		path: { id: params.id, snapshotId: params.snapshotId },
 	});
-	if (!snapshot.data) return redirect("/repositories");
 
 	const repository = await getRepository({ path: { id: params.id } });
 	if (!repository.data) return redirect("/repositories");
 
-	return { snapshot: snapshot.data, repository: repository.data };
+	return { snapshot: snapshot, repository: repository.data };
 };
 
 export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
@@ -54,9 +54,6 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 		...listBackupSchedulesOptions(),
 	});
 
-	const backupIds = loaderData.tags.map(Number).filter((tag) => !Number.isNaN(tag));
-	const backup = schedules.data?.find((b) => backupIds.includes(b.id));
-
 	if (!id || !snapshotId) {
 		return (
 			<div className="flex items-center justify-center h-full">
@@ -74,7 +71,22 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 				</div>
 			</div>
 
-			<SnapshotFileBrowser repositoryId={id} snapshot={loaderData.snapshot} />
+			<Suspense
+				fallback={
+					<SnapshotFileBrowser
+						repositoryId={id}
+						snapshot={{ duration: 0, paths: [], short_id: "", size: 0, tags: [], time: 0 }}
+					/>
+				}
+			>
+				<Await resolve={loaderData.snapshot}>
+					{(value) => {
+						if (!value.data) return <div className="text-destructive">Snapshot data not found.</div>;
+
+						return <SnapshotFileBrowser repositoryId={id} snapshot={value.data} />;
+					}}
+				</Await>
+			</Suspense>
 
 			{data?.snapshot && (
 				<Card>
@@ -99,26 +111,41 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 								<span className="text-muted-foreground">Time:</span>
 								<p>{new Date(data.snapshot.time).toLocaleString()}</p>
 							</div>
-							{backup && (
+							<Suspense fallback={<div>Loading...</div>}>
-								<>
+								<Await resolve={loaderData.snapshot}>
-									<div>
+									{(value) => {
-										<span className="text-muted-foreground">Backup Schedule:</span>
+										if (!value.data) return null;
-										<p>
+
-											<Link to={`/backups/${backup.id}`} className="text-primary hover:underline">
+										const backupIds = value.data.tags.map(Number).filter((tag) => !Number.isNaN(tag));
-												{backup.name}
+										const backupSchedule = schedules.data?.find((s) => backupIds.includes(s.id));
-											</Link>
+
-										</p>
+										return (
-									</div>
+											<>
-									<div>
+												<div>
-										<span className="text-muted-foreground">Volume:</span>
+													<span className="text-muted-foreground">Backup Schedule:</span>
-										<p>
+													<p>
-											<Link to={`/volumes/${backup.volume.name}`} className="text-primary hover:underline">
+														<Link to={`/backups/${backupSchedule?.id}`} className="text-primary hover:underline">
-												{backup.volume.name}
+															{backupSchedule?.name}
-											</Link>
+														</Link>
-										</p>
+													</p>
-									</div>
+												</div>
-								</>
+												<div>
-							)}
+													<span className="text-muted-foreground">Volume:</span>
+													<p>
+														<Link
+															to={`/volumes/${backupSchedule?.volume.name}`}
+															className="text-primary hover:underline"
+														>
+															{backupSchedule?.volume.name}
+														</Link>
+													</p>
+												</div>
+											</>
+										);
+									}}
+								</Await>
+							</Suspense>
+
 							<div className="col-span-2">
 								<span className="text-muted-foreground">Paths:</span>
 								<div className="space-y-1 mt-1">

app/client/modules/repositories/tabs/snapshots.tsx

@@ -29,15 +29,14 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 		if (!searchQuery) return true;
 		const searchLower = searchQuery.toLowerCase();
 
-		// Find the backup schedule for this snapshot
 		const backupIds = snapshot.tags.map(Number).filter((tag) => !Number.isNaN(tag));
 		const backup = schedules.data?.find((b) => backupIds.includes(b.id));
 
 		return (
 			snapshot.short_id.toLowerCase().includes(searchLower) ||
 			snapshot.paths.some((path) => path.toLowerCase().includes(searchLower)) ||
-			(backup?.name && backup.name.toLowerCase().includes(searchLower)) ||
+			backup?.name?.toLowerCase().includes(searchLower) ||
-			(backup?.volume?.name && backup.volume.name.toLowerCase().includes(searchLower))
+			backup?.volume?.name?.toLowerCase().includes(searchLower)
 		);
 	});