fix races when loading user settings

beszel/site/src/components/charts/container-chart.tsx

@@ -29,7 +29,7 @@ export default memo(function ContainerChart({
 	unit?: string
 }) {
 	const filter = useStore($containerFilter)
-	const userSettings = $userSettings.get()
+	const userSettings = useStore($userSettings)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	const { containerData } = chartData

beszel/site/src/components/charts/swap-chart.tsx

@@ -14,10 +14,11 @@ import {
 import { ChartData } from "@/types"
 import { memo } from "react"
 import { $userSettings } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
 
 export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const userSettings = $userSettings.get()
+	const userSettings = useStore($userSettings)
 
 	if (chartData.systemStats.length === 0) {
 		return null

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

@@ -135,7 +135,6 @@ export default function SystemsTable() {
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
 	const [viewMode, setViewMode] = useLocalStorage<ViewMode>("viewMode", window.innerWidth > 1024 ? "table" : "grid")
-	const userSettings = useStore($userSettings)
 
 	const locale = i18n.locale
 
@@ -230,6 +229,7 @@ export default function SystemsTable() {
 				Icon: EthernetIcon,
 				header: sortableHeader,
 				cell(info) {
+					const userSettings = useStore($userSettings)
 					const { value, unit } = formatBytes(info.getValue() as number, true, userSettings.unitNet, true)
 					return (
 						<span className="tabular-nums whitespace-nowrap">
@@ -291,6 +291,7 @@ export default function SystemsTable() {
 					if (!val) {
 						return null
 					}
+					const userSettings = useStore($userSettings)
 					const { value, unit } = formatTemperature(val, userSettings.unitTemp)
 					return (
 						<span className={cn("tabular-nums whitespace-nowrap", viewMode === "table" && "ps-0.5")}>