feat: proper timeout and order of operations

apps/client/app/modules/details/components/healthchecks-card.tsx

@@ -1,3 +1,4 @@
+import { formatDistanceToNow } from "date-fns";
 import { ScanHeartIcon } from "lucide-react";
 import type { GetVolumeResponse } from "~/api-client";
 import { Button } from "~/components/ui/button";
@@ -9,6 +10,10 @@ type Props = {
 };
 
 export const HealthchecksCard = ({ volume }: Props) => {
+	const timeAgo = formatDistanceToNow(volume.lastHealthCheck, {
+		addSuffix: true,
+	});
+
 	return (
 		<Card className="p-6 flex-1 flex flex-col">
 			<div className="flex flex-col flex-1 justify-start">
@@ -17,9 +22,7 @@ export const HealthchecksCard = ({ volume }: Props) => {
 					<h2 className="text-lg font-medium">Health Checks</h2>
 				</span>
 				<span className="">Status: {volume.status ?? "Unknown"}</span>
-				<span className="text-sm text-muted-foreground mb-4">
-					Last checked: {new Date(volume.lastHealthCheck).toLocaleString()}
-				</span>
+				<span className="text-sm text-muted-foreground mb-4">Checked {timeAgo || "never"}</span>
 				<span className="flex items-center">
 					Enable auto remount
 					<Switch className="ml-auto cursor-pointer" checked={volume.autoRemount} />

apps/client/package.json

@@ -26,6 +26,7 @@
 		"arktype": "^2.1.20",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
 		"isbot": "^5.1.27",
 		"lucide-react": "^0.539.0",
 		"next-themes": "^0.4.6",