diff --git a/internal/site/src/components/systems-table/systems-table.tsx b/internal/site/src/components/systems-table/systems-table.tsx
index c743504a3..fb0ab442b 100644
--- a/internal/site/src/components/systems-table/systems-table.tsx
+++ b/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
) : (
// grid layout
@@ -390,7 +392,11 @@ export default function SystemsTable() {
})
) : (
- No systems found.
+ {systemsLoaded ? (
+ No systems found.
+ ) : (
+
+ )}
)}
@@ -400,7 +406,17 @@ export default function SystemsTable() {
}
const AllSystemsTable = memo(
- ({ table, rows, colLength }: { table: TableType; rows: Row[]; colLength: number }) => {
+ ({
+ table,
+ rows,
+ colLength,
+ isLoading,
+ }: {
+ table: TableType
+ rows: Row[]
+ colLength: number
+ isLoading: boolean
+ }) => {
// The virtualizer will need a reference to the scrollable container element
const scrollRef = useRef(null)
@@ -445,7 +461,11 @@ const AllSystemsTable = memo(
) : (
- No systems found.
+ {isLoading ? (
+
+ ) : (
+ No systems found.
+ )}
)}
diff --git a/internal/site/src/lib/stores.ts b/internal/site/src/lib/stores.ts
index 1ab748e34..8cc357cf5 100644
--- a/internal/site/src/lib/stores.ts
+++ b/internal/site/src/lib/stores.ts
@@ -21,6 +21,8 @@ export const $downSystems = map>({})
export const $pausedSystems = map>({})
/** List of all system records */
export const $systems: ReadableAtom = 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({})
diff --git a/internal/site/src/lib/systemsManager.ts b/internal/site/src/lib/systemsManager.ts
index 1a222a854..2e002074e 100644
--- a/internal/site/src/lib/systemsManager.ts
+++ b/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)
}
}