Fix the lazy loading for the settings page. (#837)

IDisposable · web-flow · commit 9438ab77780e · 2025-10-01T11:43:15.000+02:00
Move SettingsItem into it's own page

Packages upgraded
@headlessui/react 2.2.8 -&gt; 2.2.9
framer-motion 12.23.18 -&gt; 12/23/22
react-router 7.9.1 -&gt; 7.9.3
@tailwindcss/typography 0.6.18 -&gt; 0.5.19
@types/react 19.1.13 -&gt; 19.1.14
eslint-plugin-react-refresh 0.4.21 -&gt; 0.4.22
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "kvm-ui",
   "private": true,
-  "version": "2025.09.23.0000",
+  "version": "2025.09.26.01300",
   "type": "module",
   "engines": {
     "node": "^22.15.0"
@@ -19,7 +19,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@headlessui/react": "^2.2.8",
+    "@headlessui/react": "^2.2.9",
     "@headlessui/tailwindcss": "^0.2.2",
     "@heroicons/react": "^2.2.0",
     "@vitejs/plugin-basic-ssl": "^2.1.0",
@@ -33,15 +33,15 @@
     "dayjs": "^1.11.18",
     "eslint-import-resolver-alias": "^1.1.2",
     "focus-trap-react": "^11.0.4",
-    "framer-motion": "^12.23.18",
+    "framer-motion": "^12.23.22",
     "lodash.throttle": "^4.1.1",
     "mini-svg-data-uri": "^1.4.4",
     "react": "^19.1.1",
     "react-animate-height": "^3.2.3",
     "react-dom": "^19.1.1",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
-    "react-router": "^7.9.1",
+    "react-router": "^7.9.3",
     "react-simple-keyboard": "^3.8.122",
     "react-use-websocket": "^4.13.0",
     "react-xtermjs": "^1.0.10",
@@ -57,9 +57,9 @@
     "@eslint/js": "^9.36.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/postcss": "^4.1.13",
-    "@tailwindcss/typography": "^0.5.18",
+    "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.13",
-    "@types/react": "^19.1.13",
+    "@types/react": "^19.1.14",
     "@types/react-dom": "^19.1.9",
     "@types/semver": "^7.7.1",
     "@types/validator": "^13.15.3",
@@ -72,7 +72,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.21",
+    "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
diff --git a/ui/src/components/SettingsItem.tsx b/ui/src/components/SettingsItem.tsx
@@ -0,0 +1,40 @@
+import { cx } from "@/cva.config";
+import LoadingSpinner from "@components/LoadingSpinner";
+
+interface SettingsItemProps {
+  readonly title: string;
+  readonly description: string | React.ReactNode;
+  readonly badge?: string;
+  readonly className?: string;
+  readonly loading?: boolean;
+  readonly children?: React.ReactNode;
+}
+
+export function SettingsItem(props: SettingsItemProps) {
+  const { title, description, badge, children, className, loading } = props;
+
+  return (
+    <label
+      className={cx(
+        "flex select-none items-center justify-between gap-x-8 rounded",
+        className,
+      )}
+    >
+      <div className="space-y-0.5">
+        <div className="flex items-center gap-x-2">
+          <div className="flex items-center text-base font-semibold text-black dark:text-white">
+            {title}
+            {badge && (
+              <span className="ml-2 rounded-full bg-red-500 px-2 py-1 text-[10px] font-medium leading-none text-white dark:border dark:border-red-700 dark:bg-red-800 dark:text-red-50">
+                {badge}
+              </span>
+            )}
+          </div>
+          {loading && <LoadingSpinner className="h-4 w-4 text-blue-500" />}
+        </div>
+        <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
+      </div>
+      {children ? <div>{children}</div> : null}
+    </label>
+  );
+}
diff --git a/ui/src/components/UsbDeviceSetting.tsx b/ui/src/components/UsbDeviceSetting.tsx
@@ -1,8 +1,9 @@
 import { useCallback , useEffect, useState } from "react";
 
+import { SettingsItem } from "@components/SettingsItem";
+
 import { JsonRpcResponse, useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
-import { SettingsItem } from "../routes/devices.$id.settings";
 
 import Checkbox from "./Checkbox";
 import { Button } from "./Button";
diff --git a/ui/src/components/UsbInfoSetting.tsx b/ui/src/components/UsbInfoSetting.tsx
@@ -1,12 +1,11 @@
 import { useMemo , useCallback , useEffect, useState } from "react";
 
 import { Button } from "@components/Button";
-
+import { SettingsItem } from "@components/SettingsItem";
 
 import { UsbConfigState } from "../hooks/stores";
 import { JsonRpcResponse, useJsonRpc } from "../hooks/useJsonRpc";
 import notifications from "../notifications";
-import { SettingsItem } from "../routes/devices.$id.settings";
 
 import { InputFieldWithLabel } from "./InputField";
 import { SelectMenuBasic } from "./SelectMenuBasic";
diff --git a/ui/src/routes/devices.$id.settings.access._index.tsx b/ui/src/routes/devices.$id.settings.access._index.tsx
@@ -9,6 +9,7 @@ import { GridCard } from "@/components/Card";
 import { Button, LinkButton } from "@/components/Button";
 import { InputFieldWithLabel } from "@/components/InputField";
 import { SelectMenuBasic } from "@/components/SelectMenuBasic";
+import { SettingsItem } from "@components/SettingsItem";
 import { SettingsSectionHeader } from "@/components/SettingsSectionHeader";
 import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
 import notifications from "@/notifications";
@@ -18,7 +19,6 @@ import { isOnDevice } from "@/main";
 import { TextAreaWithLabel } from "@components/TextArea";
 
 import { LocalDevice } from "./devices.$id";
-import { SettingsItem } from "./devices.$id.settings";
 import { CloudState } from "./adopt";
 
 export interface TLSState {
diff --git a/ui/src/routes/devices.$id.settings.advanced.tsx b/ui/src/routes/devices.$id.settings.advanced.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 
 import { GridCard } from "@components/Card";
+import { SettingsItem } from "@components/SettingsItem";
 
 import { Button } from "../components/Button";
 import Checkbox from "../components/Checkbox";
@@ -12,8 +13,6 @@ import { JsonRpcResponse, useJsonRpc } from "../hooks/useJsonRpc";
 import { isOnDevice } from "../main";
 import notifications from "../notifications";
 
-import { SettingsItem } from "./devices.$id.settings";
-
 export default function SettingsAdvancedRoute() {
   const { send } = useJsonRpc();
 
diff --git a/ui/src/routes/devices.$id.settings.appearance.tsx b/ui/src/routes/devices.$id.settings.appearance.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
 
+import { SettingsItem } from "@components/SettingsItem";
+
 import { SettingsPageHeader } from "../components/SettingsPageheader";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
 
-import { SettingsItem } from "./devices.$id.settings";
-
 export default function SettingsAppearanceRoute() {
   const [currentTheme, setCurrentTheme] = useState(() => {
     return localStorage.theme || "system";
diff --git a/ui/src/routes/devices.$id.settings.general._index.tsx b/ui/src/routes/devices.$id.settings.general._index.tsx
@@ -1,6 +1,7 @@
 
 import { useState , useEffect } from "react";
 
+import { SettingsItem } from "@components/SettingsItem";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 
 import { SettingsPageHeader } from "../components/SettingsPageheader";
@@ -10,7 +11,6 @@ import Checkbox from "../components/Checkbox";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
 import { useDeviceStore } from "../hooks/stores";
 
-import { SettingsItem } from "./devices.$id.settings";
 
 export default function SettingsGeneralRoute() {
   const { send } = useJsonRpc();
diff --git a/ui/src/routes/devices.$id.settings.hardware.tsx b/ui/src/routes/devices.$id.settings.hardware.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 
+import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
-import { SettingsItem } from "@routes/devices.$id.settings";
 import { BacklightSettings, useSettingsStore } from "@/hooks/stores";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
diff --git a/ui/src/routes/devices.$id.settings.keyboard.tsx b/ui/src/routes/devices.$id.settings.keyboard.tsx
@@ -3,13 +3,12 @@ import { useCallback, useEffect } from "react";
 import { useSettingsStore } from "@/hooks/stores";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
 import useKeyboardLayout from "@/hooks/useKeyboardLayout";
+import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { Checkbox } from "@/components/Checkbox";
 import { SelectMenuBasic } from "@/components/SelectMenuBasic";
 import notifications from "@/notifications";
 
-import { SettingsItem } from "./devices.$id.settings";
-
 export default function SettingsKeyboardRoute() {
   const { setKeyboardLayout } = useSettingsStore();
   const { showPressedKeys, setShowPressedKeys } = useSettingsStore();
diff --git a/ui/src/routes/devices.$id.settings.mouse.tsx b/ui/src/routes/devices.$id.settings.mouse.tsx
@@ -7,6 +7,7 @@ import { GridCard } from "@/components/Card";
 import { Checkbox } from "@/components/Checkbox";
 import { useSettingsStore } from "@/hooks/stores";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
+import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { JigglerSetting } from "@components/JigglerSetting";
@@ -15,8 +16,6 @@ import { cx } from "../cva.config";
 import notifications from "../notifications";
 import SettingsNestedSection from "../components/SettingsNestedSection";
 
-import { SettingsItem } from "./devices.$id.settings";
-
 export interface JigglerConfig {
   inactivity_limit_seconds: number;
   jitter_percentage: number;
diff --git a/ui/src/routes/devices.$id.settings.network.tsx b/ui/src/routes/devices.$id.settings.network.tsx
@@ -21,15 +21,14 @@ import { SelectMenuBasic } from "@/components/SelectMenuBasic";
 import { SettingsPageHeader } from "@/components/SettingsPageheader";
 import Fieldset from "@/components/Fieldset";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
+import { SettingsItem } from "@components/SettingsItem";
 import notifications from "@/notifications";
 
 import Ipv6NetworkCard from "../components/Ipv6NetworkCard";
 import EmptyCard from "../components/EmptyCard";
 import AutoHeight from "../components/AutoHeight";
 import DhcpLeaseCard from "../components/DhcpLeaseCard";
 
-import { SettingsItem } from "./devices.$id.settings";
-
 dayjs.extend(relativeTime);
 
 const defaultNetworkSettings: NetworkSettings = {
diff --git a/ui/src/routes/devices.$id.settings.tsx b/ui/src/routes/devices.$id.settings.tsx
@@ -1,3 +1,4 @@
+import React, { useEffect, useRef, useState } from "react";
 import { NavLink, Outlet, useLocation } from "react-router";
 import {
   LuSettings,
@@ -12,17 +13,14 @@ import {
   LuCommand,
   LuNetwork,
 } from "react-icons/lu";
-import React, { useEffect, useRef, useState } from "react";
 import { useResizeObserver } from "usehooks-ts";
 
-import Card from "@/components/Card";
-import { LinkButton } from "@/components/Button";
-import { FeatureFlag } from "@/components/FeatureFlag";
-import LoadingSpinner from "@/components/LoadingSpinner";
+import { cx } from "@/cva.config";
+import Card from "@components/Card";
+import { LinkButton } from "@components/Button";
+import { FeatureFlag } from "@components/FeatureFlag";
 import { useUiStore } from "@/hooks/stores";
 
-import { cx } from "../cva.config";
-
 /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
 export default function SettingsRoute() {
   const location = useLocation();
@@ -257,40 +255,3 @@ export default function SettingsRoute() {
     </div>
   );
 }
-
-interface SettingsItemProps {
-  readonly title: string;
-  readonly description: string | React.ReactNode;
-  readonly badge?: string;
-  readonly className?: string;
-  readonly loading?: boolean;
-  readonly children?: React.ReactNode;
-}
-export function SettingsItem(props: SettingsItemProps) {
-  const { title, description, badge, children, className, loading } = props;
-
-  return (
-    <label
-      className={cx(
-        "flex select-none items-center justify-between gap-x-8 rounded",
-        className,
-      )}
-    >
-      <div className="space-y-0.5">
-        <div className="flex items-center gap-x-2">
-          <div className="flex items-center text-base font-semibold text-black dark:text-white">
-            {title}
-            {badge && (
-              <span className="ml-2 rounded-full bg-red-500 px-2 py-1 text-[10px] font-medium leading-none text-white dark:border dark:border-red-700 dark:bg-red-800 dark:text-red-50">
-                {badge}
-              </span>
-            )}
-          </div>
-          {loading && <LoadingSpinner className="h-4 w-4 text-blue-500" />}
-        </div>
-        <div className="text-sm text-slate-700 dark:text-slate-300">{description}</div>
-      </div>
-      {children ? <div>{children}</div> : null}
-    </label>
-  );
-}
diff --git a/ui/src/routes/devices.$id.settings.video.tsx b/ui/src/routes/devices.$id.settings.video.tsx
@@ -3,14 +3,13 @@ import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/Button";
 import { TextAreaWithLabel } from "@/components/TextArea";
 import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
+import { SettingsItem } from "@components/SettingsItem";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useSettingsStore } from "@/hooks/stores";
 import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import Fieldset from "@components/Fieldset";
 import notifications from "@/notifications";
 
-import { SettingsItem } from "./devices.$id.settings";
-
 const defaultEdid =
   "00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
 const edids = [
