diff --git a/ui/src/components/UsbDeviceSetting.tsx b/ui/src/components/UsbDeviceSetting.tsx index 8b68f16..2663674 100644 --- a/ui/src/components/UsbDeviceSetting.tsx +++ b/ui/src/components/UsbDeviceSetting.tsx @@ -127,7 +127,7 @@ export function UsbDeviceSetting() { ); const handlePresetChange = useCallback( - async (e: React.ChangeEvent) => { + (e: React.ChangeEvent) => { const newPreset = e.target.value; setSelectedPreset(newPreset); diff --git a/ui/src/components/UsbInfoSetting.tsx b/ui/src/components/UsbInfoSetting.tsx index 1d6a455..cc837f4 100644 --- a/ui/src/components/UsbInfoSetting.tsx +++ b/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"}`, diff --git a/ui/src/components/WebRTCVideo.tsx b/ui/src/components/WebRTCVideo.tsx index b24ced1..21d4aca 100644 --- a/ui/src/components/WebRTCVideo.tsx +++ b/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; diff --git a/ui/src/main.tsx b/ui/src/main.tsx index 6fb5738..5374658 100644 --- a/ui/src/main.tsx +++ b/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: , + element: , children: [ { index: true, @@ -139,7 +139,7 @@ if (isOnDevice) { children: [ { index: true, - element: , + element: , }, { path: "reboot", @@ -265,7 +265,7 @@ if (isOnDevice) { }, { path: "settings", - element: , + element: , children: [ { index: true, @@ -276,7 +276,7 @@ if (isOnDevice) { children: [ { index: true, - element: , + element: , }, { path: "update", diff --git a/ui/src/routes/devices.$id.mount.tsx b/ui/src/routes/devices.$id.mount.tsx index c017920..295429f 100644 --- a/ui/src/routes/devices.$id.mount.tsx +++ b/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(); diff --git a/ui/src/routes/devices.$id.settings._index.tsx b/ui/src/routes/devices.$id.settings._index.tsx index 603efec..4fb35ed 100644 --- a/ui/src/routes/devices.$id.settings._index.tsx +++ b/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; \ No newline at end of file diff --git a/ui/src/routes/devices.$id.settings.access._index.tsx b/ui/src/routes/devices.$id.settings.access._index.tsx index b3e0c9a..52c6fc6 100644 --- a/ui/src/routes/devices.$id.settings.access._index.tsx +++ b/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); }); diff --git a/ui/src/routes/devices.$id.settings.general.update.tsx b/ui/src/routes/devices.$id.settings.general.update.tsx index 16b3378..a641cbc 100644 --- a/ui/src/routes/devices.$id.settings.general.update.tsx +++ b/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((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")); diff --git a/ui/src/routes/devices.$id.settings.mouse.tsx b/ui/src/routes/devices.$id.settings.mouse.tsx index 42d6fae..ab1aec6 100644 --- a/ui/src/routes/devices.$id.settings.mouse.tsx +++ b/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"}`, diff --git a/ui/src/routes/devices.$id.tsx b/ui/src/routes/devices.$id.tsx index a4ecf3d..1017eb4 100644 --- a/ui/src/routes/devices.$id.tsx +++ b/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): Promise => 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