react refactoring for better performance with lots of systems

2025-10-20 10:19:27 +08:00 · 2025-03-13 02:16:54 -04:00
parent ae22334645
commit d36b8369cc
6 changed files with 553 additions and 492 deletions
--- a/beszel/site/src/components/command-palette.tsx
+++ b/beszel/site/src/components/command-palette.tsx
@@ -19,17 +19,15 @@ import {
 	CommandSeparator,
 	CommandShortcut,
 } from "@/components/ui/command"
-import { useEffect } from "react"
-import { useStore } from "@nanostores/react"
+import { memo, useEffect, useMemo } from "react"
 import { $systems } from "@/lib/stores"
 import { getHostDisplayValue, isAdmin, listen } from "@/lib/utils"
 import { $router, basePath, navigate } from "./router"
-import { Trans, t } from "@lingui/macro"
+import { Trans } from "@lingui/react/macro"
+import { t } from "@lingui/core/macro"
 import { getPagePath } from "@nanostores/router"

-export default function CommandPalette({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) {
-	const systems = useStore($systems)
-
+export default memo(function CommandPalette({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) {
 	useEffect(() => {
 		const down = (e: KeyboardEvent) => {
 			if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -40,6 +38,8 @@ export default function CommandPalette({ open, setOpen }: { open: boolean; setOp
 		return listen(document, "keydown", down)
 	}, [open, setOpen])

+	return useMemo(() => {
+		const systems = $systems.get()
 		return (
 			<CommandDialog open={open} onOpenChange={setOpen}>
 				<CommandInput placeholder={t`Search for systems or settings...`} />
@@ -193,4 +193,5 @@ export default function CommandPalette({ open, setOpen }: { open: boolean; setOp
 				</CommandList>
 			</CommandDialog>
 		)
-}
+	}, [open])
+})
--- a/beszel/site/src/components/routes/home.tsx
+++ b/beszel/site/src/components/routes/home.tsx
@@ -1,6 +1,6 @@
-import { Suspense, lazy, useEffect, useMemo } from "react"
+import { Suspense, lazy, memo, useEffect, useMemo } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
-import { $alerts, $hubVersion, $systems, pb } from "@/lib/stores"
+import { $alerts, $systems, pb } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { GithubIcon } from "lucide-react"
 import { Separator } from "../ui/separator"
@@ -8,17 +8,17 @@ import { alertInfo, updateRecordList, updateSystemList } from "@/lib/utils"
 import { AlertRecord, SystemRecord } from "@/types"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { $router, Link } from "../router"
-import { Plural, t, Trans } from "@lingui/macro"
+import { Plural, Trans, useLingui } from "@lingui/react/macro"
 import { getPagePath } from "@nanostores/router"

 const SystemsTable = lazy(() => import("../systems-table/systems-table"))

-export default function Home() {
-	const hubVersion = useStore($hubVersion)
-
+export const Home = memo(() => {
 	const alerts = useStore($alerts)
 	const systems = useStore($systems)
+	const { t } = useLingui()

+	let alertsKey = ""
 	const activeAlerts = useMemo(() => {
 		const activeAlerts = alerts.filter((alert) => {
 			const active = alert.triggered && alert.name in alertInfo
@@ -26,14 +26,17 @@ export default function Home() {
 				return false
 			}
 			alert.sysname = systems.find((system) => system.id === alert.system)?.name
+			alertsKey += alert.id
 			return true
 		})
 		return activeAlerts
-	}, [alerts])
+	}, [systems, alerts])

 	useEffect(() => {
 		document.title = t`Dashboard` + " / Beszel"
+	}, [t])

+	useEffect(() => {
 		// make sure we have the latest list of systems
 		updateSystemList()

@@ -41,7 +44,6 @@ export default function Home() {
 		pb.collection<SystemRecord>("systems").subscribe("*", (e) => {
 			updateRecordList(e, $systems)
 		})
-		// todo: add toast if new triggered alert comes in
 		pb.collection<AlertRecord>("alerts").subscribe("*", (e) => {
 			updateRecordList(e, $alerts)
 		})
@@ -51,10 +53,40 @@ export default function Home() {
 		}
 	}, [])

-	return (
+	return useMemo(
+		() => (
 			<>
 				{/* show active alerts */}
-			{activeAlerts.length > 0 && (
+				{activeAlerts.length > 0 && <ActiveAlerts key={activeAlerts.length} activeAlerts={activeAlerts} />}
+				<Suspense>
+					<SystemsTable />
+				</Suspense>
+
+				<div className="flex gap-1.5 justify-end items-center pe-3 sm:pe-6 mt-3.5 text-xs opacity-80">
+					<a
+						href="https://github.com/henrygd/beszel"
+						target="_blank"
+						className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground duration-75"
+					>
+						<GithubIcon className="h-3 w-3" /> GitHub
+					</a>
+					<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
+					<a
+						href="https://github.com/henrygd/beszel/releases"
+						target="_blank"
+						className="text-muted-foreground hover:text-foreground duration-75"
+					>
+						Beszel {globalThis.BESZEL.HUB_VERSION}
+					</a>
+				</div>
+			</>
+		),
+		[alertsKey]
+	)
+})
+
+const ActiveAlerts = memo(({ activeAlerts }: { activeAlerts: AlertRecord[] }) => {
+	return (
 		<Card className="mb-4">
 			<CardHeader className="pb-4 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
 				<div className="px-2 sm:px-1">
@@ -95,30 +127,5 @@ export default function Home() {
 				)}
 			</CardContent>
 		</Card>
-			)}
-			<Suspense>
-				<SystemsTable />
-			</Suspense>
-
-			{hubVersion && (
-				<div className="flex gap-1.5 justify-end items-center pe-3 sm:pe-6 mt-3.5 text-xs opacity-80">
-					<a
-						href="https://github.com/henrygd/beszel"
-						target="_blank"
-						className="flex items-center gap-0.5 text-muted-foreground hover:text-foreground duration-75"
-					>
-						<GithubIcon className="h-3 w-3" /> GitHub
-					</a>
-					<Separator orientation="vertical" className="h-2.5 bg-muted-foreground opacity-70" />
-					<a
-						href="https://github.com/henrygd/beszel/releases"
-						target="_blank"
-						className="text-muted-foreground hover:text-foreground duration-75"
-					>
-						Beszel {hubVersion}
-					</a>
-				</div>
-			)}
-		</>
 	)
-}
+})
--- a/beszel/site/src/components/systems-table/systems-table.tsx
+++ b/beszel/site/src/components/systems-table/systems-table.tsx
@@ -10,6 +10,8 @@ import {
 	getCoreRowModel,
 	useReactTable,
 	HeaderContext,
+	Row,
+	Table as TableType,
 } from "@tanstack/react-table"

 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -61,14 +63,13 @@ import {
 	PenBoxIcon,
 } from "lucide-react"
 import { memo, useEffect, useMemo, useRef, useState } from "react"
-import { $hubVersion, $systems, pb } from "@/lib/stores"
+import { $systems, pb } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { cn, copyToClipboard, decimalString, isReadOnlyUser, useLocalStorage } from "@/lib/utils"
 import AlertsButton from "../alerts/alert-button"
 import { $router, Link, navigate } from "../router"
 import { EthernetIcon, GpuIcon, ThermometerIcon } from "../ui/icons"
-import { Trans, t } from "@lingui/macro"
-import { useLingui } from "@lingui/react"
+import { useLingui, Trans } from "@lingui/react/macro"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Input } from "../ui/input"
 import { ClassValue } from "clsx"
@@ -103,62 +104,66 @@ function CellFormatter(info: CellContext<SystemRecord, unknown>) {

 function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
 	const { column } = context
+	// @ts-ignore
+	const { Icon, hideSort, name }: { Icon: React.ElementType; name: () => string; hideSort: boolean } = column.columnDef
 	return (
 		<Button
 			variant="ghost"
 			className="h-9 px-3 flex"
 			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
 		>
-			{/* @ts-ignore */}
-			{column.columnDef.icon && <column.columnDef.icon className="me-2 size-4" />}
-			{column.id}
-			{/* @ts-ignore */}
-			{column.columnDef.hideSort || <ArrowUpDownIcon className="ms-2 size-4" />}
+			{Icon && <Icon className="me-2 size-4" />}
+			{name()}
+			{hideSort || <ArrowUpDownIcon className="ms-2 size-4" />}
 		</Button>
 	)
 }

 export default function SystemsTable() {
 	const data = useStore($systems)
-	const hubVersion = useStore($hubVersion)
+	const { i18n, t } = useLingui()
 	const [filter, setFilter] = useState<string>()
-	const [sorting, setSorting] = useState<SortingState>([{ id: t`System`, desc: false }])
+	const [sorting, setSorting] = useState<SortingState>([{ id: "system", desc: false }])
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
 	const [viewMode, setViewMode] = useLocalStorage<ViewMode>("viewMode", window.innerWidth > 1024 ? "table" : "grid")
-	const { i18n } = useLingui()
+
+	const locale = i18n.locale

 	useEffect(() => {
 		if (filter !== undefined) {
-			table.getColumn(t`System`)?.setFilterValue(filter)
+			table.getColumn("system")?.setFilterValue(filter)
 		}
 	}, [filter])

-	const columns = useMemo(() => {
-		// Create status translations for filtering
+	const columnDefs = useMemo(() => {
 		const statusTranslations = {
-			"up": t`Up`.toLowerCase(),
-			"down": t`Down`.toLowerCase(),
-			"paused": t`Paused`.toLowerCase()
-		};
+			up: () => t`Up`.toLowerCase(),
+			down: () => t`Down`.toLowerCase(),
+			paused: () => t`Paused`.toLowerCase(),
+		}
 		return [
 			{
 				// size: 200,
 				size: 200,
 				minSize: 0,
 				accessorKey: "name",
-				id: t`System`,
+				id: "system",
+				name: () => t`System`,
 				filterFn: (row, _, filterVal) => {
-					const filterLower = filterVal.toLowerCase();
-					const { name, status } = row.original;
+					const filterLower = filterVal.toLowerCase()
+					const { name, status } = row.original
 					// Check if the filter matches the name or status for this row
-					if (name.toLowerCase().includes(filterLower) || statusTranslations[status as keyof typeof statusTranslations]?.includes(filterLower)) {
-						return true;
+					if (
+						name.toLowerCase().includes(filterLower) ||
+						statusTranslations[status as keyof typeof statusTranslations]?.().includes(filterLower)
+					) {
+						return true
 					}
-					return false;
+					return false
 				},
 				enableHiding: false,
-				icon: ServerIcon,
+				Icon: ServerIcon,
 				cell: (info) => (
 					<span className="flex gap-0.5 items-center text-base md:pe-5">
 						<IndicatorDot system={info.row.original} />
@@ -177,43 +182,48 @@ export default function SystemsTable() {
 			},
 			{
 				accessorKey: "info.cpu",
-				id: t`CPU`,
+				id: "cpu",
+				name: () => t`CPU`,
 				invertSorting: true,
 				cell: CellFormatter,
-				icon: CpuIcon,
+				Icon: CpuIcon,
 				header: sortableHeader,
 			},
 			{
 				accessorKey: "info.mp",
-				id: t`Memory`,
+				id: "memory",
+				name: () => t`Memory`,
 				invertSorting: true,
 				cell: CellFormatter,
-				icon: MemoryStickIcon,
+				Icon: MemoryStickIcon,
 				header: sortableHeader,
 			},
 			{
 				accessorKey: "info.dp",
-				id: t`Disk`,
+				id: "disk",
+				name: () => t`Disk`,
 				invertSorting: true,
 				cell: CellFormatter,
-				icon: HardDriveIcon,
+				Icon: HardDriveIcon,
 				header: sortableHeader,
 			},
 			{
 				accessorFn: (originalRow) => originalRow.info.g,
-				id: "GPU",
+				id: "gpu",
+				name: () => t`GPU`,
 				invertSorting: true,
 				sortUndefined: -1,
 				cell: CellFormatter,
-				icon: GpuIcon,
+				Icon: GpuIcon,
 				header: sortableHeader,
 			},
 			{
 				accessorFn: (originalRow) => originalRow.info.b || 0,
-				id: t`Net`,
+				id: "net",
+				name: () => t`Net`,
 				invertSorting: true,
 				size: 50,
-				icon: EthernetIcon,
+				Icon: EthernetIcon,
 				header: sortableHeader,
 				cell(info) {
 					const val = info.getValue() as number
@@ -230,15 +240,13 @@ export default function SystemsTable() {
 			},
 			{
 				accessorFn: (originalRow) => originalRow.info.dt,
-				id: t({
-					message: "Temp",
-					comment: "Temperature label in systems table",
-				}),
+				id: "temp",
+				name: () => t({ message: "Temp", comment: "Temperature label in systems table" }),
 				invertSorting: true,
 				sortUndefined: -1,
 				size: 50,
 				hideSort: true,
-				icon: ThermometerIcon,
+				Icon: ThermometerIcon,
 				header: sortableHeader,
 				cell(info) {
 					const val = info.getValue() as number
@@ -258,15 +266,16 @@ export default function SystemsTable() {
 			},
 			{
 				accessorKey: "info.v",
-				id: t`Agent`,
+				id: "agent",
+				name: () => t`Agent`,
 				invertSorting: true,
 				size: 50,
-				icon: WifiIcon,
+				Icon: WifiIcon,
 				hideSort: true,
 				header: sortableHeader,
 				cell(info) {
 					const version = info.getValue() as string
-					if (!version || !hubVersion) {
+					if (!version) {
 						return null
 					}
 					const system = info.row.original
@@ -280,7 +289,7 @@ export default function SystemsTable() {
 								system={system}
 								className={
 									(system.status !== "up" && "bg-primary/30") ||
-									(version === hubVersion && "bg-green-500") ||
+									(version === globalThis.BESZEL.HUB_VERSION && "bg-green-500") ||
 									"bg-yellow-500"
 								}
 							/>
@@ -290,7 +299,9 @@ export default function SystemsTable() {
 				},
 			},
 			{
-				id: t({ message: "Actions", comment: "Table column" }),
+				id: "actions",
+				// @ts-ignore
+				name: () => t({ message: "Actions", comment: "Table column" }),
 				size: 50,
 				cell: ({ row }) => (
 					<div className="flex justify-end items-center gap-1">
@@ -300,11 +311,11 @@ export default function SystemsTable() {
 				),
 			},
 		] as ColumnDef<SystemRecord>[]
-	}, [hubVersion, i18n.locale])
+	}, [])

 	const table = useReactTable({
 		data,
-		columns,
+		columns: columnDefs,
 		getCoreRowModel: getCoreRowModel(),
 		onSortingChange: setSorting,
 		getSortedRowModel: getSortedRowModel(),
@@ -318,15 +329,17 @@ export default function SystemsTable() {
 		},
 		defaultColumn: {
 			minSize: 0,
-			size: Number.MAX_SAFE_INTEGER,
-			maxSize: Number.MAX_SAFE_INTEGER,
+			size: 900,
+			maxSize: 900,
 		},
 	})

 	const rows = table.getRowModel().rows
-
+	const columns = table.getAllColumns()
+	const visibleColumns = table.getVisibleLeafColumns()
+	// TODO: hiding temp then gpu messes up table headers
+	const CardHead = useMemo(() => {
 		return (
-		<Card>
 			<CardHeader className="pb-5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
 				<div className="grid md:flex gap-5 w-full items-end">
 					<div className="px-2 sm:px-1">
@@ -377,8 +390,8 @@ export default function SystemsTable() {
 										</DropdownMenuLabel>
 										<DropdownMenuSeparator />
 										<div className="px-1 pb-1">
-											{table.getAllColumns().map((column) => {
-												if (column.id === t`Actions` || !column.getCanSort()) return null
+											{columns.map((column) => {
+												if (!column.getCanSort()) return null
 												let Icon = <span className="w-6"></span>
 												// if current sort column, show sort direction
 												if (sorting[0]?.id === column.id) {
@@ -397,7 +410,8 @@ export default function SystemsTable() {
 														key={column.id}
 													>
 														{Icon}
-														{column.id}
+														{/* @ts-ignore */}
+														{column.columnDef.name()}
 													</DropdownMenuItem>
 												)
 											})}
@@ -411,8 +425,7 @@ export default function SystemsTable() {
 										</DropdownMenuLabel>
 										<DropdownMenuSeparator />
 										<div className="px-1.5 pb-1">
-											{table
-												.getAllColumns()
+											{columns
 												.filter((column) => column.getCanHide())
 												.map((column) => {
 													return (
@@ -422,7 +435,8 @@ export default function SystemsTable() {
 															checked={column.getIsVisible()}
 															onCheckedChange={(value) => column.toggleVisibility(!!value)}
 														>
-															{column.id}
+															{/* @ts-ignore */}
+															{column.columnDef.name()}
 														</DropdownMenuCheckboxItem>
 													)
 												})}
@@ -434,39 +448,96 @@ export default function SystemsTable() {
 					</div>
 				</div>
 			</CardHeader>
+		)
+	}, [visibleColumns.length, sorting, viewMode, locale])
+
+	return (
+		<Card>
+			{CardHead}
 			<div className="p-6 pt-0 max-sm:py-3 max-sm:px-2">
 				{viewMode === "table" ? (
 					// table layout
 					<div className="rounded-md border overflow-hidden">
+						<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
+					</div>
+				) : (
+					// grid layout
+					<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+						{rows?.length ? (
+							rows.map((row) => {
+								return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} />
+							})
+						) : (
+							<div className="col-span-full text-center py-8">
+								<Trans>No systems found.</Trans>
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+		</Card>
+	)
+}
+
+const AllSystemsTable = memo(
+	({ table, rows, colLength }: { table: TableType<SystemRecord>; rows: Row<SystemRecord>[]; colLength: number }) => {
+		return (
 			<Table>
+				<SystemsTableHead table={table} colLength={colLength} />
+				<TableBody>
+					{rows.length ? (
+						rows.map((row) => (
+							<SystemTableRow key={row.original.id} row={row} length={rows.length} colLength={colLength} />
+						))
+					) : (
+						<TableRow>
+							<TableCell colSpan={colLength} className="h-24 text-center">
+								<Trans>No systems found.</Trans>
+							</TableCell>
+						</TableRow>
+					)}
+				</TableBody>
+			</Table>
+		)
+	}
+)
+
+function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>; colLength: number }) {
+	const { i18n } = useLingui()
+	return useMemo(() => {
+		return (
 			<TableHeader>
 				{table.getHeaderGroups().map((headerGroup) => (
 					<TableRow key={headerGroup.id}>
 						{headerGroup.headers.map((header) => {
 							return (
 								<TableHead className="px-2" key={header.id}>
-													{header.isPlaceholder
-														? null
-														: flexRender(header.column.columnDef.header, header.getContext())}
+									{flexRender(header.column.columnDef.header, header.getContext())}
 								</TableHead>
 							)
 						})}
 					</TableRow>
 				))}
 			</TableHeader>
-							<TableBody>
-								{rows.length ? (
-									table.getRowModel().rows.map((row) => (
+		)
+	}, [i18n.locale, colLength])
+}
+
+const SystemTableRow = memo(
+	({ row, length, colLength }: { row: Row<SystemRecord>; length: number; colLength: number }) => {
+		const system = row.original
+		const { t } = useLingui()
+		return useMemo(() => {
+			return (
 				<TableRow
-											key={row.original.id}
-											data-state={row.getIsSelected() && "selected"}
+					// data-state={row.getIsSelected() && "selected"}
 					className={cn("cursor-pointer transition-opacity", {
-												"opacity-50": row.original.status === "paused",
+						"opacity-50": system.status === "paused",
 					})}
 					onClick={(e) => {
 						const target = e.target as HTMLElement
 						if (!target.closest("[data-nolink]") && e.currentTarget.contains(target)) {
-													navigate(getPagePath($router, "system", { name: row.original.name }))
+							navigate(getPagePath($router, "system", { name: system.name }))
 						}
 					}}
 				>
@@ -474,39 +545,32 @@ export default function SystemsTable() {
 						<TableCell
 							key={cell.id}
 							style={{
-														width: cell.column.getSize() === Number.MAX_SAFE_INTEGER ? "auto" : cell.column.getSize(),
+								width: cell.column.getSize(),
 							}}
-													className={cn("overflow-hidden relative", data.length > 10 ? "py-2" : "py-2.5")}
+							className={cn("overflow-hidden relative", length > 10 ? "py-2" : "py-2.5")}
 						>
 							{flexRender(cell.column.columnDef.cell, cell.getContext())}
 						</TableCell>
 					))}
 				</TableRow>
-									))
-								) : (
-									<TableRow>
-										<TableCell colSpan={columns.length} className="h-24 text-center">
-											<Trans>No systems found.</Trans>
-										</TableCell>
-									</TableRow>
-								)}
-							</TableBody>
-						</Table>
-					</div>
-				) : (
-					// grid layout
-					<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-						{table.getRowModel().rows?.length ? (
-							table.getRowModel().rows.map((row) => {
+			)
+		}, [system, colLength, t])
+	}
+)
+
+const SystemCard = memo(
+	({ row, table, colLength }: { row: Row<SystemRecord>; table: TableType<SystemRecord>; colLength: number }) => {
 		const system = row.original
-								const { status } = system
+		const { t } = useLingui()
+
+		return useMemo(() => {
 			return (
 				<Card
 					key={system.id}
 					className={cn(
 						"cursor-pointer hover:shadow-md transition-all bg-transparent w-full dark:border-border duration-200 relative",
 						{
-												"opacity-50": status === "paused",
+							"opacity-50": system.status === "paused",
 						}
 					)}
 				>
@@ -520,7 +584,7 @@ export default function SystemsTable() {
 									</CardTitle>
 								</div>
 							</CardTitle>
-												{table.getColumn(t`Actions`)?.getIsVisible() && (
+							{table.getColumn("actions")?.getIsVisible() && (
 								<div className="flex gap-1 flex-shrink-0 relative z-10">
 									<AlertsButton system={system} />
 									<ActionsButton system={system} />
@@ -530,18 +594,16 @@ export default function SystemsTable() {
 					</CardHeader>
 					<CardContent className="space-y-2.5 text-sm px-5 pt-3.5 pb-4">
 						{table.getAllColumns().map((column) => {
-												if (!column.getIsVisible() || column.id === t`System` || column.id === t`Actions`) return null
+							if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
 							const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
 							if (!cell) return null
+							// @ts-ignore
+							const { Icon, name } = column.columnDef as ColumnDef<SystemRecord, unknown>
 							return (
 								<div key={column.id} className="flex items-center gap-3">
-														{/* @ts-ignore */}
-														{column.columnDef?.icon && (
-															// @ts-ignore
-															<column.columnDef.icon className="size-4 text-muted-foreground" />
-														)}
+									{Icon && <Icon className="size-4 text-muted-foreground" />}
 									<div className="flex items-center gap-3 flex-1">
-															<span className="text-muted-foreground min-w-16">{column.id}:</span>
+										<span className="text-muted-foreground min-w-16">{name()}:</span>
 										<div className="flex-1">{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>
 									</div>
 								</div>
@@ -556,41 +618,18 @@ export default function SystemsTable() {
 					</Link>
 				</Card>
 			)
-							})
-						) : (
-							<div className="col-span-full text-center py-8">
-								<Trans>No systems found.</Trans>
-							</div>
-						)}
-					</div>
-				)}
-			</div>
-		</Card>
-	)
-}
-
-function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {
-	className ||= {
-		"bg-green-500": system.status === "up",
-		"bg-red-500": system.status === "down",
-		"bg-primary/40": system.status === "paused",
-		"bg-yellow-500": system.status === "pending",
+		}, [system, colLength, t])
 	}
-	return (
-		<span
-			className={cn("flex-shrink-0 size-2 rounded-full", className)}
-			// style={{ marginBottom: "-1px" }}
-		/>
-	)
-}
+)

 const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 	const [deleteOpen, setDeleteOpen] = useState(false)
 	const [editOpen, setEditOpen] = useState(false)
 	let editOpened = useRef(false)
+	const { t } = useLingui()

+	return useMemo(() => {
 		const { id, status, host, name } = system
-
 		return (
 			<>
 				<DropdownMenu>
@@ -678,4 +717,20 @@ const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 				</AlertDialog>
 			</>
 		)
+	}, [system.id, t, deleteOpen, editOpen])
 })
+
+function IndicatorDot({ system, className }: { system: SystemRecord; className?: ClassValue }) {
+	className ||= {
+		"bg-green-500": system.status === "up",
+		"bg-red-500": system.status === "down",
+		"bg-primary/40": system.status === "paused",
+		"bg-yellow-500": system.status === "pending",
+	}
+	return (
+		<span
+			className={cn("flex-shrink-0 size-2 rounded-full", className)}
+			// style={{ marginBottom: "-1px" }}
+		/>
+	)
+}
--- a/beszel/site/src/index.css
+++ b/beszel/site/src/index.css
@@ -74,6 +74,7 @@
@layer base {
 	* {
 		@apply border-border;
+		overflow-anchor: none;
 	}
 	body {
 		@apply bg-background text-foreground;
--- a/beszel/site/src/lib/stores.ts
+++ b/beszel/site/src/lib/stores.ts
@@ -18,9 +18,6 @@ export const $alerts = atom([] as AlertRecord[])
 /** SSH public key */
 export const $publicKey = atom("")

-/** Beszel hub version */
-export const $hubVersion = atom("")
-
 /** Chart time period */
 export const $chartTime = atom("1h") as PreinitializedWritableAtom<ChartTimes>

--- a/beszel/site/src/main.tsx
+++ b/beszel/site/src/main.tsx
@@ -1,11 +1,11 @@
 import "./index.css"
 // import { Suspense, lazy, useEffect, StrictMode } from "react"
-import { Suspense, lazy, useEffect } from "react"
+import { Suspense, lazy, memo, useEffect } from "react"
 import ReactDOM from "react-dom/client"
-import Home from "./components/routes/home.tsx"
+import { Home } from "./components/routes/home.tsx"
 import { ThemeProvider } from "./components/theme-provider.tsx"
 import { DirectionProvider } from "@radix-ui/react-direction"
-import { $authenticated, $systems, pb, $publicKey, $hubVersion, $copyContent, $direction } from "./lib/stores.ts"
+import { $authenticated, $systems, pb, $publicKey, $copyContent, $direction } from "./lib/stores.ts"
 import { updateUserSettings, updateAlerts, updateFavicon, updateSystemList } from "./lib/utils.ts"
 import { useStore } from "@nanostores/react"
 import { Toaster } from "./components/ui/toaster.tsx"
@@ -14,13 +14,14 @@ import SystemDetail from "./components/routes/system.tsx"
 import Navbar from "./components/navbar.tsx"
 import { I18nProvider } from "@lingui/react"
 import { i18n } from "@lingui/core"
+import "@/lib/i18n.ts"

 // const ServerDetail = lazy(() => import('./components/routes/system.tsx'))
 const LoginPage = lazy(() => import("./components/login/login.tsx"))
 const CopyToClipboardDialog = lazy(() => import("./components/copy-to-clipboard.tsx"))
 const Settings = lazy(() => import("./components/routes/settings/layout.tsx"))

-const App = () => {
+const App = memo(() => {
 	const page = useStore($router)
 	const authenticated = useStore($authenticated)
 	const systems = useStore($systems)
@@ -33,7 +34,6 @@ const App = () => {
 		// get version / public key
 		pb.send("/api/beszel/getkey", {}).then((data) => {
 			$publicKey.set(data.key)
-			$hubVersion.set(data.v)
 		})
 		// get servers / alerts / settings
 		updateUserSettings()
@@ -74,7 +74,7 @@ const App = () => {
 			</Suspense>
 		)
 	}
-}
+})

 const Layout = () => {
 	const authenticated = useStore($authenticated)