fix(site): show spinner in systems table until systems are loaded

internal/site/src/components/systems-table/systems-table.tsx

@@ -25,6 +25,7 @@ import {
 	FilterIcon,
 	LayoutGridIcon,
 	LayoutListIcon,
+	LoaderCircleIcon,
 	Settings2Icon,
 	XIcon,
 } from "lucide-react"
@@ -45,7 +46,7 @@ import { Input } from "@/components/ui/input"
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { SystemStatus } from "@/lib/enums"
 import { queueUserSettings } from "@/lib/api"
-import { $downSystems, $pausedSystems, $systems, $upSystems, $userSettings } from "@/lib/stores"
+import { $downSystems, $pausedSystems, $systems, $systemsLoaded, $upSystems, $userSettings } from "@/lib/stores"
 import { cn, runOnce } from "@/lib/utils"
 import type { SystemRecord } from "@/types"
 import AlertButton from "../alerts/alert-button"
@@ -60,6 +61,7 @@ const preloadSystemDetail = runOnce(() => import("@/components/routes/system.tsx
 
 export default function SystemsTable() {
 	const data = useStore($systems)
+	const systemsLoaded = useStore($systemsLoaded)
 	const downSystems = $downSystems.get()
 	const upSystems = $upSystems.get()
 	const pausedSystems = $pausedSystems.get()
@@ -379,7 +381,7 @@ export default function SystemsTable() {
 			{viewMode === "table" ? (
 				// table layout
 				<div className="rounded-md">
-					<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
+					<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} isLoading={!systemsLoaded} />
 				</div>
 			) : (
 				// grid layout
@@ -390,7 +392,11 @@ export default function SystemsTable() {
 						})
 					) : (
 						<div className="col-span-full text-center py-8">
-							<Trans>No systems found.</Trans>
+							{systemsLoaded ? (
+								<Trans>No systems found.</Trans>
+							) : (
+								<LoaderCircleIcon className="animate-spin size-10 opacity-60 mx-auto" />
+							)}
 						</div>
 					)}
 				</div>
@@ -400,7 +406,17 @@ export default function SystemsTable() {
 }
 
 const AllSystemsTable = memo(
-	({ table, rows, colLength }: { table: TableType<SystemRecord>; rows: Row<SystemRecord>[]; colLength: number }) => {
+	({
+		table,
+		rows,
+		colLength,
+		isLoading,
+	}: {
+		table: TableType<SystemRecord>
+		rows: Row<SystemRecord>[]
+		colLength: number
+		isLoading: boolean
+	}) => {
 		// The virtualizer will need a reference to the scrollable container element
 		const scrollRef = useRef<HTMLDivElement>(null)
 
@@ -445,7 +461,11 @@ const AllSystemsTable = memo(
 							) : (
 								<TableRow>
 									<TableCell colSpan={colLength} className="h-37 text-center pointer-events-none">
-										<Trans>No systems found.</Trans>
+										{isLoading ? (
+											<LoaderCircleIcon className="animate-spin size-10 opacity-60 mx-auto" />
+										) : (
+											<Trans>No systems found.</Trans>
+										)}
 									</TableCell>
 								</TableRow>
 							)}

internal/site/src/lib/stores.ts

@@ -21,6 +21,8 @@ export const $downSystems = map<Record<string, SystemRecord>>({})
 export const $pausedSystems = map<Record<string, SystemRecord>>({})
 /** List of all system records */
 export const $systems: ReadableAtom<SystemRecord[]> = computed($allSystemsById, Object.values)
+/** Whether the initial systems list has been fetched */
+export const $systemsLoaded = atom(false)
 
 /** Map of alert records by system id and alert name */
 export const $alerts = map<AlertMap>({})

internal/site/src/lib/systemsManager.ts

@@ -7,6 +7,7 @@ import {
 	$downSystems,
 	$longestSystemName,
 	$pausedSystems,
+	$systemsLoaded,
 	$textMeasureVersion,
 	$upSystems,
 } from "@/lib/stores"
@@ -188,6 +189,8 @@ export async function refresh() {
 		}
 	} catch (error) {
 		console.error("Failed to refresh systems:", error)
+	} finally {
+		$systemsLoaded.set(true)
 	}
 }