Merge e2e69e6975 into d952480c2a

ui/src/components/UsbDeviceSetting.tsx

@@ -127,7 +127,7 @@ export function UsbDeviceSetting() {
   );
 
   const handlePresetChange = useCallback(
-    async (e: React.ChangeEvent<HTMLSelectElement>) => {
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
       const newPreset = e.target.value;
       setSelectedPreset(newPreset);
 

ui/src/components/UsbInfoSetting.tsx

@@ -137,7 +137,7 @@ export function UsbInfoSetting() {
   );
 
   useEffect(() => {
-    send("getDeviceID", {}, async (resp: JsonRpcResponse) => {
+    send("getDeviceID", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
         return notifications.error(
           `Failed to get device ID: ${resp.error.data || "Unknown error"}`,

ui/src/components/WebRTCVideo.tsx

@@ -411,7 +411,7 @@ export default function WebRTCVideo() {
   );
 
   const keyDownHandler = useCallback(
-    async (e: KeyboardEvent) => {
+    (e: KeyboardEvent) => {
       e.preventDefault();
       const prev = useHidStore.getState();
       let code = e.code;

ui/src/main.tsx

@@ -1,3 +1,4 @@
+import { lazy } from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import {
@@ -9,46 +10,45 @@ import {
 } from "react-router-dom";
 import { ExclamationTriangleIcon } from "@heroicons/react/16/solid";
 
+import { CLOUD_API, DEVICE_API } from "@/ui.config";
+import api from "@/api";
+import Root from "@/root";
+import Card from "@components/Card";
 import EmptyCard from "@components/EmptyCard";
 import NotFoundPage from "@components/NotFoundPage";
+import DeviceRoute, { LocalDevice } from "@routes/devices.$id";
+import WelcomeRoute, { DeviceStatus } from "@routes/welcome-local";
+import LoginLocalRoute from "@routes/login-local";
+import WelcomeLocalModeRoute from "@routes/welcome-local.mode";
+import WelcomeLocalPasswordRoute from "@routes/welcome-local.password";
+import AdoptRoute from "@routes/adopt";
+import SetupRoute from "@routes/devices.$id.setup";
 import DevicesIdDeregister from "@routes/devices.$id.deregister";
 import DeviceIdRename from "@routes/devices.$id.rename";
-import AdoptRoute from "@routes/adopt";
-import SignupRoute from "@routes/signup";
-import LoginRoute from "@routes/login";
-import SetupRoute from "@routes/devices.$id.setup";
 import DevicesRoute from "@routes/devices";
-import DeviceRoute, { LocalDevice } from "@routes/devices.$id";
-import Card from "@components/Card";
-import DevicesAlreadyAdopted from "@routes/devices.already-adopted";
-
-import Root from "./root";
-import Notifications from "./notifications";
-import LoginLocalRoute from "./routes/login-local";
-import WelcomeLocalModeRoute from "./routes/welcome-local.mode";
-import WelcomeRoute, { DeviceStatus } from "./routes/welcome-local";
-import WelcomeLocalPasswordRoute from "./routes/welcome-local.password";
-import { CLOUD_API, DEVICE_API } from "./ui.config";
-import OtherSessionRoute from "./routes/devices.$id.other-session";
-import MountRoute from "./routes/devices.$id.mount";
-import * as SettingsRoute from "./routes/devices.$id.settings";
-import SettingsMouseRoute from "./routes/devices.$id.settings.mouse";
-import SettingsKeyboardRoute from "./routes/devices.$id.settings.keyboard";
-import api from "./api";
-import * as SettingsIndexRoute from "./routes/devices.$id.settings._index";
-import SettingsAdvancedRoute from "./routes/devices.$id.settings.advanced";
-import SettingsAccessIndexRoute from "./routes/devices.$id.settings.access._index";
-import SettingsHardwareRoute from "./routes/devices.$id.settings.hardware";
-import SettingsVideoRoute from "./routes/devices.$id.settings.video";
-import SettingsAppearanceRoute from "./routes/devices.$id.settings.appearance";
-import * as SettingsGeneralIndexRoute from "./routes/devices.$id.settings.general._index";
-import SettingsGeneralRebootRoute from "./routes/devices.$id.settings.general.reboot";
-import SettingsGeneralUpdateRoute from "./routes/devices.$id.settings.general.update";
-import SettingsNetworkRoute from "./routes/devices.$id.settings.network";
-import SecurityAccessLocalAuthRoute from "./routes/devices.$id.settings.access.local-auth";
-import SettingsMacrosRoute from "./routes/devices.$id.settings.macros";
-import SettingsMacrosAddRoute from "./routes/devices.$id.settings.macros.add";
-import SettingsMacrosEditRoute from "./routes/devices.$id.settings.macros.edit";
+import SettingsIndexRoute from "@routes/devices.$id.settings._index";
+import SettingsAccessIndexRoute from "@routes/devices.$id.settings.access._index";
+const Notifications = lazy(() => import("@/notifications"));
+const SignupRoute = lazy(() => import("@routes/signup"));
+const LoginRoute = lazy(() => import("@routes/login"));
+const DevicesAlreadyAdopted = lazy(() => import("@routes/devices.already-adopted"));
+const OtherSessionRoute = lazy(() => import("@routes/devices.$id.other-session"));
+const MountRoute = lazy(() => import("./routes/devices.$id.mount"));
+const SettingsRoute = lazy(() => import("@routes/devices.$id.settings"));
+const SettingsMouseRoute = lazy(() => import("@routes/devices.$id.settings.mouse"));
+const SettingsKeyboardRoute = lazy(() => import("@routes/devices.$id.settings.keyboard"));
+const SettingsAdvancedRoute = lazy(() => import("@routes/devices.$id.settings.advanced"));
+const SettingsHardwareRoute = lazy(() => import("@routes/devices.$id.settings.hardware"));
+const SettingsVideoRoute = lazy(() => import("@routes/devices.$id.settings.video"));
+const SettingsAppearanceRoute = lazy(() => import("@routes/devices.$id.settings.appearance"));
+const SettingsGeneralIndexRoute = lazy(() => import("@routes/devices.$id.settings.general._index"));
+const SettingsGeneralRebootRoute = lazy(() => import("@routes/devices.$id.settings.general.reboot"));
+const SettingsGeneralUpdateRoute = lazy(() => import("@routes/devices.$id.settings.general.update"));
+const SettingsNetworkRoute = lazy(() => import("@routes/devices.$id.settings.network"));
+const SecurityAccessLocalAuthRoute = lazy(() => import("@routes/devices.$id.settings.access.local-auth"));
+const SettingsMacrosRoute = lazy(() => import("@routes/devices.$id.settings.macros"));
+const SettingsMacrosAddRoute = lazy(() => import("@routes/devices.$id.settings.macros.add"));
+const SettingsMacrosEditRoute = lazy(() => import("@routes/devices.$id.settings.macros.edit"));
 
 export const isOnDevice = import.meta.env.MODE === "device";
 export const isInCloud = !isOnDevice;
@@ -128,7 +128,7 @@ if (isOnDevice) {
         },
         {
           path: "settings",
-          element: <SettingsRoute.default />,
+          element: <SettingsRoute />,
           children: [
             {
               index: true,
@@ -139,7 +139,7 @@ if (isOnDevice) {
               children: [
                 {
                   index: true,
-                  element: <SettingsGeneralIndexRoute.default />,
+                  element: <SettingsGeneralIndexRoute />,
                 },
                 {
                   path: "reboot",
@@ -265,7 +265,7 @@ if (isOnDevice) {
                 },
                 {
                   path: "settings",
-                  element: <SettingsRoute.default />,
+                  element: <SettingsRoute />,
                   children: [
                     {
                       index: true,
@@ -276,7 +276,7 @@ if (isOnDevice) {
                       children: [
                         {
                           index: true,
-                          element: <SettingsGeneralIndexRoute.default />,
+                          element: <SettingsGeneralIndexRoute />,
                         },
                         {
                           path: "update",

ui/src/routes/devices.$id.mount.tsx

@@ -89,7 +89,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
     console.log(`Mounting ${url} as ${mode}`);
 
     setMountInProgress(true);
-    send("mountWithHTTP", { url, mode }, async (resp: JsonRpcResponse) => {
+    send("mountWithHTTP", { url, mode }, (resp: JsonRpcResponse) => {
       if ("error" in resp) triggerError(resp.error.message);
 
       clearMountMediaState();
@@ -108,7 +108,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
     console.log(`Mounting ${fileName} as ${mode}`);
 
     setMountInProgress(true);
-    send("mountWithStorage", { filename: fileName, mode }, async (resp: JsonRpcResponse) => {
+    send("mountWithStorage", { filename: fileName, mode }, (resp: JsonRpcResponse) => {
       if ("error" in resp) triggerError(resp.error.message);
 
       clearMountMediaState();

ui/src/routes/devices.$id.settings._index.tsx

@@ -2,6 +2,12 @@ import { LoaderFunctionArgs, redirect } from "react-router-dom";
 
 import { getDeviceUiPath } from "../hooks/useAppNavigation";
 
-export function loader({ params }: LoaderFunctionArgs) {
+const loader = ({ params }: LoaderFunctionArgs) => {
   return redirect(getDeviceUiPath("/settings/general", params.id));
 }
+
+export default function SettingIndexRoute() {
+  return (<></>);
+}
+
+SettingIndexRoute.loader = loader;

ui/src/routes/devices.$id.settings.access._index.tsx

@@ -87,7 +87,7 @@ export default function SettingsAccessIndexRoute() {
     });
   }, [send]);
 
-  const deregisterDevice = async () => {
+  const deregisterDevice = () => {
     send("deregisterDevice", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
         notifications.error(
@@ -198,7 +198,7 @@ export default function SettingsAccessIndexRoute() {
     getCloudState();
     getTLSState();
 
-    send("getDeviceID", {}, async (resp: JsonRpcResponse) => {
+    send("getDeviceID", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) return console.error(resp.error);
       setDeviceId(resp.result as string);
     });

ui/src/routes/devices.$id.settings.general.update.tsx

@@ -62,7 +62,7 @@ export function Dialog({
   const { modalView, setModalView, otaState } = useUpdateStore();
 
   const onFinishedLoading = useCallback(
-    async (versionInfo: SystemVersionInfo) => {
+    (versionInfo: SystemVersionInfo) => {
       const hasUpdate =
         versionInfo?.systemUpdateAvailable || versionInfo?.appUpdateAvailable;
 
@@ -141,7 +141,7 @@ function LoadingState({
 
   const getVersionInfo = useCallback(() => {
     return new Promise<SystemVersionInfo>((resolve, reject) => {
-      send("getUpdateStatus", {}, async (resp: JsonRpcResponse) => {
+      send("getUpdateStatus", {}, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
           notifications.error(`Failed to check for updates: ${resp.error}`);
           reject(new Error("Failed to check for updates"));

ui/src/routes/devices.$id.settings.mouse.tsx

@@ -121,7 +121,7 @@ export default function SettingsMouseRoute() {
   const saveJigglerConfig = useCallback(
     (jigglerConfig: JigglerConfig) => {
       // We assume the jiggler should be set to enabled if the config is being updated
-      send("setJigglerState", { enabled: true }, async (resp: JsonRpcResponse) => {
+      send("setJigglerState", { enabled: true }, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
           return notifications.error(
             `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
@@ -129,7 +129,7 @@ export default function SettingsMouseRoute() {
         }
       });
 
-      send("setJigglerConfig", { jigglerConfig }, async (resp: JsonRpcResponse) => {
+      send("setJigglerConfig", { jigglerConfig }, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
           const errorMsg = resp.error.data || "Unknown error";
 
@@ -163,7 +163,7 @@ export default function SettingsMouseRoute() {
 
     // We don't need to update the device jiggler state when the option is "disabled"
     if (option === "disabled") {
-      send("setJigglerState", { enabled: false }, async (resp: JsonRpcResponse) => {
+      send("setJigglerState", { enabled: false }, (resp: JsonRpcResponse) => {
         if ("error" in resp) {
           return notifications.error(
             `Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,

ui/src/routes/devices.$id.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   LoaderFunctionArgs,
   Outlet,
@@ -16,7 +16,11 @@ import { FocusTrap } from "focus-trap-react";
 import { motion, AnimatePresence } from "framer-motion";
 import useWebSocket from "react-use-websocket";
 
+import { CLOUD_API, DEVICE_API } from "@/ui.config";
+import api from "@/api";
+import { checkAuth, isInCloud, isOnDevice } from "@/main";
 import { cx } from "@/cva.config";
+import notifications from "@/notifications";
 import {
   HidState,
   KeyboardLedState,
@@ -34,27 +38,21 @@ import {
   VideoState,
 } from "@/hooks/stores";
 import WebRTCVideo from "@components/WebRTCVideo";
-import { checkAuth, isInCloud, isOnDevice } from "@/main";
 import DashboardNavbar from "@components/Header";
-import ConnectionStatsSidebar from "@/components/sidebar/connectionStats";
+const ConnectionStatsSidebar = lazy(() => import('@/components/sidebar/connectionStats'));
+const Terminal = lazy(() => import('@components/Terminal'));
+const UpdateInProgressStatusCard = lazy(() => import("@/components/UpdateInProgressStatusCard"));
+import Modal from "@/components/Modal";
 import { JsonRpcRequest, JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
-import Terminal from "@components/Terminal";
-import { CLOUD_API, DEVICE_API } from "@/ui.config";
-
-import UpdateInProgressStatusCard from "../components/UpdateInProgressStatusCard";
-import api from "../api";
-import Modal from "../components/Modal";
-import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
 import {
   ConnectionFailedOverlay,
   LoadingConnectionOverlay,
   PeerConnectionDisconnectedOverlay,
-} from "../components/VideoOverlay";
-import { FeatureFlagProvider } from "../providers/FeatureFlagProvider";
-import notifications from "../notifications";
-
-import { DeviceStatus } from "./welcome-local";
-import { SystemVersionInfo } from "./devices.$id.settings.general.update";
+} from "@/components/VideoOverlay";
+import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
+import { FeatureFlagProvider } from "@/providers/FeatureFlagProvider";
+import { DeviceStatus } from "@routes/welcome-local";
+import { SystemVersionInfo } from "@routes/devices.$id.settings.general.update";
 
 interface LocalLoaderResp {
   authMode: "password" | "noPassword" | null;
@@ -114,7 +112,7 @@ const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> =>
   return { user, iceConfig, deviceName: device.name || device.id };
 };
 
-const loader = async ({ params }: LoaderFunctionArgs) => {
+const loader = ({ params }: LoaderFunctionArgs) => {
   return import.meta.env.MODE === "device" ? deviceLoader() : cloudLoader(params);
 };
 
@@ -452,7 +450,7 @@ export default function KvmIdRoute() {
       }
     };
 
-    pc.onicecandidate = async ({ candidate }) => {
+    pc.onicecandidate = ({ candidate }) => {
       if (!candidate) return;
       if (candidate.candidate === "") return;
       sendWebRTCSignal("new-ice-candidate", candidate);
@@ -735,7 +733,7 @@ export default function KvmIdRoute() {
   useEffect(() => {
     if (appVersion) return;
 
-    send("getUpdateStatus", {}, async (resp: JsonRpcResponse) => {
+    send("getUpdateStatus", {}, (resp: JsonRpcResponse) => {
       if ("error" in resp) {
         notifications.error(`Failed to get device version: ${resp.error}`);
         return