Merge 3bd9f841e0 into 05bf61152b

* feature/Faster loading

This refactors all the hot-path components for an already-setup JetKVM so that we only
lazy-load the components off the main path. This greatly reduces the initial .JS size at
initial page load from a single file of

dist/assets/index-D4LZBdmN.js                          1,969.46 kB │ gzip: 570.08 kB

To these files, of which the hot-path only loads the 963.29 kB index for a savings of
just over a megabyte (180kb savings in gzip).

dist/assets/login-DA9KVVX1.js                                     0.64 kB │ gzip:   0.40 kB
dist/assets/signup-Bb_VCzY1.js                                    0.67 kB │ gzip:   0.40 kB
dist/assets/devices._id.settings.macros.add-DpBnq5E0.js           0.82 kB │ gzip:   0.55 kB
dist/assets/devices._id.settings.appearance-VHd5B2H2.js           0.91 kB │ gzip:   0.52 kB
dist/assets/devices._id.settings.general.reboot-DsRBP5Dd.js       1.01 kB │ gzip:   0.52 kB
dist/assets/UpdateInProgressStatusCard-DJCdJo-z.js                1.05 kB │ gzip:   0.54 kB
dist/assets/devices._id.other-session-BpXjEP6K.js                 1.09 kB │ gzip:   0.56 kB
dist/assets/devices.already-adopted-BC1xoKrN.js                   1.16 kB │ gzip:   0.57 kB
dist/assets/Checkbox-DGO277w5.js                                  1.24 kB │ gzip:   0.64 kB
dist/assets/devices._id.settings.keyboard-Cno0kaUr.js             1.59 kB │ gzip:   0.81 kB
dist/assets/devices._id.settings.general._index-CNW0Pj5B.js       1.71 kB │ gzip:   0.76 kB
dist/assets/devices._id.settings.macros.edit-BYQGw2CJ.js          1.92 kB │ gzip:   1.00 kB
dist/assets/ConfirmDialog-lzerZkf7.js                             2.77 kB │ gzip:   1.13 kB
dist/assets/AuthLayout-H4vGP3TU.js                                2.96 kB │ gzip:   1.41 kB
dist/assets/AutoHeight-B-TU1fRg.js                                4.07 kB │ gzip:   1.63 kB
dist/assets/devices._id.settings.video-O3qJWstQ.js                5.68 kB │ gzip:   2.17 kB
dist/assets/devices._id.settings.advanced-Drd_iPzw.js             5.98 kB │ gzip:   2.08 kB
dist/assets/devices._id.settings.macros-D3unB0uf.js               6.05 kB │ gzip:   2.13 kB
dist/assets/devices._id.settings.access.local-auth-BltQI66N.js    6.17 kB │ gzip:   1.54 kB
dist/assets/devices._id.settings.mouse-CAwDHqxl.js               10.02 kB │ gzip:   3.59 kB
dist/assets/devices._id.settings.general.update-jkzXML1U.js      10.22 kB │ gzip:   2.67 kB
dist/assets/devices._id.settings.hardware-B7v3lfwA.js            10.41 kB │ gzip:   3.03 kB
dist/assets/devices._id.settings.network-CJYfzFt2.js             25.23 kB │ gzip:   7.21 kB
dist/assets/devices._id.mount-4AT1reig.js                        43.92 kB │ gzip:  19.81 kB
dist/assets/MacroForm-BQpdQgFn.js                                49.75 kB │ gzip:  16.25 kB
dist/assets/connectionStats-NM-PZeH3.js                         400.14 kB │ gzip: 110.33 kB
dist/assets/Terminal-Dgo3sfr-.js                                425.05 kB │ gzip: 109.49 kB
dist/assets/index-w6H2Mz3f.js                                   963.29 kB │ gzip: 294.20 kB

* Remove feral async declarations on things that have no await

ui/src/components/CustomTooltip.tsx

@@ -1,25 +1,25 @@
 import Card from "@components/Card";
 
 export interface CustomTooltipProps {
-  payload: { payload: { date: number; stat: number }; unit: string }[];
+  payload: { payload: { date: number; metric: number }; unit: string }[];
 }
 
 export default function CustomTooltip({ payload }: CustomTooltipProps) {
   if (payload?.length) {
     const toolTipData = payload[0];
-    const { date, stat } = toolTipData.payload;
+    const { date, metric } = toolTipData.payload;
 
     return (
       <Card>
-        <div className="p-2 text-black dark:text-white">
+        <div className="px-2 py-1.5 text-black dark:text-white">
-          <div className="font-semibold">
+          <div className="text-[13px] font-semibold">
             {new Date(date * 1000).toLocaleTimeString()}
           </div>
           <div className="space-y-1">
             <div className="flex items-center gap-x-1">
               <div className="h-[2px] w-2 bg-blue-700" />
-              <span >
+              <span className="text-[13px]">
-                {stat} {toolTipData?.unit}
+                {metric} {toolTipData?.unit}
               </span>
             </div>
           </div>

ui/src/components/Metric.tsx

@@ -1,12 +1,14 @@
 import { ComponentProps } from "react";
 import { cva, cx } from "cva";
 
+import { someIterable } from "../utils";
+
 import { GridCard } from "./Card";
-import StatChart from "./StatChart";
+import MetricsChart from "./MetricsChart";
 
 interface ChartPoint {
   date: number;
-  stat: number | null;
+  metric: number | null;
 }
 
 interface MetricProps<T, K extends keyof T> {
@@ -17,45 +19,42 @@ interface MetricProps<T, K extends keyof T> {
   data?: ChartPoint[];
   gate?: Map<number, unknown>;
   supported?: boolean;
-  map?: (p: { date: number; stat: T[K] | null }) => ChartPoint;
+  map?: (p: { date: number; metric: number | null }) => ChartPoint;
   domain?: [number, number];
-  unit?: string;
+  unit: string;
   heightClassName?: string;
   referenceValue?: number;
   badge?: ComponentProps<typeof MetricHeader>["badge"];
   badgeTheme?: ComponentProps<typeof MetricHeader>["badgeTheme"];
 }
 
+/* eslint-disable-next-line */
 export function createChartArray<T, K extends keyof T>(
-  stream: Map<number, T>,
+  metrics: Map<number, T>,
-  metric: K,
+  metricName: K,
-): { date: number; stat: T[K] | null }[] {
+) {
-  const stat = Array.from(stream).map(([key, stats]) => {
+  const result: { date: number; metric: number | null }[] = [];
-    return { date: key, stat: stats[metric] };
+  const iter = metrics.entries();
-  });
+  let next = iter.next() as IteratorResult<[number, T]>;
-
-  // Sort the dates to ensure they are in chronological order
-  const sortedStat = stat.map(x => x.date).sort((a, b) => a - b);
-
-  // Determine the earliest statistic date
-  const earliestStat = sortedStat[0];
-
-  // Current time in seconds since the Unix epoch
   const now = Math.floor(Date.now() / 1000);
 
-  // Determine the starting point for the chart data
+  // We want 120 data points, in the chart.
-  const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120;
+  const firstDate = Math.min(next.value?.[0] ?? now, now - 120);
 
-  // Generate the chart array for the range between 'firstChartDate' and 'now'
+  for (let t = firstDate; t < now; t++) {
-  return Array.from({ length: now - firstChartDate }, (_, i) => {
+    while (!next.done && next.value[0] < t) next = iter.next();
-    const currentDate = firstChartDate + i;
+    const has = !next.done && next.value[0] === t;
-    return {
+
-      date: currentDate,
+    let metric = null;
-      // Find the statistic for 'currentDate', or use the last known statistic if none exists for that date
+    if (has) metric = next.value[1][metricName] as number;
-      stat: stat.find(x => x.date === currentDate)?.stat ?? null,
+    result.push({ date: t, metric });
-    };
+
-  });
+    if (has) next = iter.next();
+  }
+
+  return result;
 }
+
 const theme = {
   light:
     "bg-white text-black border border-slate-800/20 dark:border dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300",
@@ -110,26 +109,30 @@ export function Metric<T, K extends keyof T>({
   domain = [0, 600],
   unit = "",
   heightClassName = "h-[127px]",
-  referenceValue,
   badge,
   badgeTheme,
 }: MetricProps<T, K>) {
   const ready = gate ? gate.size > 0 : stream ? stream.size > 0 : true;
   const supportedFinal =
     supported ??
-    (stream && metric
+    (stream && metric ? someIterable(stream, ([, s]) => s[metric] !== undefined) : true);
-      ? Array.from(stream).some(([, s]) => s[metric] !== undefined)
-      : true);
 
-  const raw = stream && metric ? createChartArray(stream, metric) : [];
+  // Either we let the consumer provide their own chartArray, or we create one from the stream and metric.
-  const dataFinal: ChartPoint[] =
+  const raw = data ?? ((stream && metric && createChartArray(stream, metric)) || []);
-    data ??
+
-    (map
+  // If the consumer provides a map function, we apply it to the raw data.
-      ? raw.map(map)
+  const dataFinal: ChartPoint[] = map ? raw.map(map) : raw;
-      : raw.map(x => ({
+  const recent = dataFinal
-          date: x.date,
+    .slice(-(raw.length - 1))
-          stat: typeof x.stat === "number" ? (x.stat as unknown as number) : null,
+    .filter(x => x.metric != null) as ChartPoint[];
-        })));
+
+  // Average the recent values
+  const computedReferenceValue =
+    recent.length > 0
+      ? Math.round(
+          recent.reduce((sum, x) => sum + (x.metric as number), 0) / recent.length,
+        )
+      : undefined;
 
   return (
     <div className="space-y-2">
@@ -149,11 +152,11 @@ export function Metric<T, K extends keyof T>({
               <p className="text-slate-700">Waiting for data...</p>
             </div>
           ) : supportedFinal ? (
-            <StatChart
+            <MetricsChart
               data={dataFinal}
               domain={domain}
               unit={unit}
-              referenceValue={referenceValue}
+              referenceValue={computedReferenceValue}
             />
           ) : (
             <div className="flex flex-col items-center space-y-1">

ui/src/components/MetricsChart.tsx

@@ -12,13 +12,13 @@ import {
 
 import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
 
-export default function StatChart({
+export default function MetricsChart({
   data,
   domain,
   unit,
   referenceValue,
 }: {
-  data: { date: number; stat: number | null | undefined }[];
+  data: { date: number; metric: number | null | undefined }[];
   domain?: [string | number, string | number];
   unit?: string;
   referenceValue?: number;
@@ -33,7 +33,7 @@ export default function StatChart({
           strokeLinecap="butt"
           stroke="rgba(30, 41, 59, 0.1)"
         />
-        {referenceValue && (
+        {referenceValue !== undefined && (
           <ReferenceLine
             y={referenceValue}
             strokeDasharray="3 3"
@@ -64,7 +64,7 @@ export default function StatChart({
             .map(x => x.date)}
         />
         <YAxis
-          dataKey="stat"
+          dataKey="metric"
           axisLine={false}
           orientation="right"
           tick={{
@@ -73,6 +73,7 @@ export default function StatChart({
             fill: "rgba(107, 114, 128, 1)",
           }}
           padding={{ top: 0, bottom: 0 }}
+          allowDecimals
           tickLine={false}
           unit={unit}
           domain={domain || ["auto", "auto"]}
@@ -87,7 +88,7 @@ export default function StatChart({
         <Line
           type="monotone"
           isAnimationActive={false}
-          dataKey="stat"
+          dataKey="metric"
           stroke="rgb(29 78 216)"
           strokeLinecap="round"
           strokeWidth={2}

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/components/sidebar/connectionStats.tsx

@@ -5,19 +5,13 @@ import { useRTCStore, useUiStore } from "@/hooks/stores";
 
 import { createChartArray, Metric } from "../Metric";
 import { SettingsSectionHeader } from "../SettingsSectionHeader";
+import { someIterable } from "../../utils";
 
 export default function ConnectionStatsSidebar() {
   const inboundVideoRtpStats = useRTCStore(state => state.inboundRtpStats);
   const iceCandidatePairStats = useRTCStore(state => state.candidatePairStats);
   const setSidebarView = useUiStore(state => state.setSidebarView);
 
-  function isMetricSupported<T, K extends keyof T>(
-    stream: Map<number, T>,
-    metric: K,
-  ): boolean {
-    return Array.from(stream).some(([, stat]) => stat[metric] !== undefined);
-  }
-
   const appendInboundVideoRtpStats = useRTCStore(state => state.appendInboundRtpStats);
   const appendIceCandidatePair = useRTCStore(state => state.appendCandidatePairStats);
   const appendDiskDataChannelStats = useRTCStore(
@@ -72,13 +66,13 @@ export default function ConnectionStatsSidebar() {
   );
 
   const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => {
-    if (idx === 0) return { date: d.date, stat: null };
+    if (idx === 0) return { date: d.date, metric: null };
-    const prevDelay = jitterBufferDelay[idx - 1]?.stat as number | null | undefined;
+    const prevDelay = jitterBufferDelay[idx - 1]?.metric as number | null | undefined;
-    const currDelay = d.stat as number | null | undefined;
+    const currDelay = d.metric as number | null | undefined;
     const prevEmitted =
-      (jitterBufferEmittedCount[idx - 1]?.stat as number | null | undefined) ?? null;
+      (jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null;
     const currEmitted =
-      (jitterBufferEmittedCount[idx]?.stat as number | null | undefined) ?? null;
+      (jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null;
 
     if (
       prevDelay == null ||
@@ -86,7 +80,7 @@ export default function ConnectionStatsSidebar() {
       prevEmitted == null ||
       currEmitted == null
     ) {
-      return { date: d.date, stat: null };
+      return { date: d.date, metric: null };
     }
 
     const deltaDelay = currDelay - prevDelay;
@@ -94,23 +88,13 @@ export default function ConnectionStatsSidebar() {
 
     // Guard counter resets or no emitted frames
     if (deltaDelay < 0 || deltaEmitted <= 0) {
-      return { date: d.date, stat: null };
+      return { date: d.date, metric: null };
     }
 
     const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000);
-    return { date: d.date, stat: valueMs };
+    return { date: d.date, metric: valueMs };
   });
 
-  // Rolling average over the last N seconds for the reference line
-  const rollingWindowSeconds = 20;
-  const recent = jitterBufferAvgDelayData
-    .slice(-rollingWindowSeconds)
-    .filter(x => x.stat != null) as { date: number; stat: number }[];
-  const referenceValue =
-    recent.length > 0
-      ? Math.round(recent.reduce((sum, x) => sum + (x.stat as number), 0) / recent.length)
-      : undefined;
-
   return (
     <div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
       <SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
@@ -128,11 +112,10 @@ export default function ConnectionStatsSidebar() {
                   title="Round-Trip Time"
                   description="Round-trip time for the active ICE candidate pair between peers."
                   stream={iceCandidatePairStats}
-                  gate={inboundVideoRtpStats}
                   metric="currentRoundTripTime"
                   map={x => ({
                     date: x.date,
-                    stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
                   })}
                   domain={[0, 600]}
                   unit=" ms"
@@ -156,7 +139,7 @@ export default function ConnectionStatsSidebar() {
                   metric="jitter"
                   map={x => ({
                     date: x.date,
-                    stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
+                    metric: x.metric != null ? Math.round(x.metric * 1000) : null,
                   })}
                   domain={[0, 10]}
                   unit=" ms"
@@ -171,12 +154,17 @@ export default function ConnectionStatsSidebar() {
                   data={jitterBufferAvgDelayData}
                   gate={inboundVideoRtpStats}
                   supported={
-                    isMetricSupported(inboundVideoRtpStats, "jitterBufferDelay") &&
+                    someIterable(
-                    isMetricSupported(inboundVideoRtpStats, "jitterBufferEmittedCount")
+                      inboundVideoRtpStats,
+                      ([, x]) => x.jitterBufferDelay != null,
+                    ) &&
+                    someIterable(
+                      inboundVideoRtpStats,
+                      ([, x]) => x.jitterBufferEmittedCount != null,
+                    )
                   }
                   domain={[0, 30]}
                   unit=" ms"
-                  referenceValue={referenceValue}
                 />
 
                 {/* Packets Lost */}

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 SettingsIndexRoute from "@routes/devices.$id.settings._index";
-import Card from "@components/Card";
+import SettingsAccessIndexRoute from "@routes/devices.$id.settings.access._index";
-import DevicesAlreadyAdopted from "@routes/devices.already-adopted";
+const Notifications = lazy(() => import("@/notifications"));
-
+const SignupRoute = lazy(() => import("@routes/signup"));
-import Root from "./root";
+const LoginRoute = lazy(() => import("@routes/login"));
-import Notifications from "./notifications";
+const DevicesAlreadyAdopted = lazy(() => import("@routes/devices.already-adopted"));
-import LoginLocalRoute from "./routes/login-local";
+const OtherSessionRoute = lazy(() => import("@routes/devices.$id.other-session"));
-import WelcomeLocalModeRoute from "./routes/welcome-local.mode";
+const MountRoute = lazy(() => import("./routes/devices.$id.mount"));
-import WelcomeRoute, { DeviceStatus } from "./routes/welcome-local";
+const SettingsRoute = lazy(() => import("@routes/devices.$id.settings"));
-import WelcomeLocalPasswordRoute from "./routes/welcome-local.password";
+const SettingsMouseRoute = lazy(() => import("@routes/devices.$id.settings.mouse"));
-import { CLOUD_API, DEVICE_API } from "./ui.config";
+const SettingsKeyboardRoute = lazy(() => import("@routes/devices.$id.settings.keyboard"));
-import OtherSessionRoute from "./routes/devices.$id.other-session";
+const SettingsAdvancedRoute = lazy(() => import("@routes/devices.$id.settings.advanced"));
-import MountRoute from "./routes/devices.$id.mount";
+const SettingsHardwareRoute = lazy(() => import("@routes/devices.$id.settings.hardware"));
-import * as SettingsRoute from "./routes/devices.$id.settings";
+const SettingsVideoRoute = lazy(() => import("@routes/devices.$id.settings.video"));
-import SettingsMouseRoute from "./routes/devices.$id.settings.mouse";
+const SettingsAppearanceRoute = lazy(() => import("@routes/devices.$id.settings.appearance"));
-import SettingsKeyboardRoute from "./routes/devices.$id.settings.keyboard";
+const SettingsGeneralIndexRoute = lazy(() => import("@routes/devices.$id.settings.general._index"));
-import api from "./api";
+const SettingsGeneralRebootRoute = lazy(() => import("@routes/devices.$id.settings.general.reboot"));
-import * as SettingsIndexRoute from "./routes/devices.$id.settings._index";
+const SettingsGeneralUpdateRoute = lazy(() => import("@routes/devices.$id.settings.general.update"));
-import SettingsAdvancedRoute from "./routes/devices.$id.settings.advanced";
+const SettingsNetworkRoute = lazy(() => import("@routes/devices.$id.settings.network"));
-import SettingsAccessIndexRoute from "./routes/devices.$id.settings.access._index";
+const SecurityAccessLocalAuthRoute = lazy(() => import("@routes/devices.$id.settings.access.local-auth"));
-import SettingsHardwareRoute from "./routes/devices.$id.settings.hardware";
+const SettingsMacrosRoute = lazy(() => import("@routes/devices.$id.settings.macros"));
-import SettingsVideoRoute from "./routes/devices.$id.settings.video";
+const SettingsMacrosAddRoute = lazy(() => import("@routes/devices.$id.settings.macros.add"));
-import SettingsAppearanceRoute from "./routes/devices.$id.settings.appearance";
+const SettingsMacrosEditRoute = lazy(() => import("@routes/devices.$id.settings.macros.edit"));
-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";
 
 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";
+} from "@/components/VideoOverlay";
-import { FeatureFlagProvider } from "../providers/FeatureFlagProvider";
+import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
-import notifications from "../notifications";
+import { FeatureFlagProvider } from "@/providers/FeatureFlagProvider";
-
+import { DeviceStatus } from "@routes/welcome-local";
-import { DeviceStatus } from "./welcome-local";
+import { SystemVersionInfo } from "@routes/devices.$id.settings.general.update";
-import { SystemVersionInfo } from "./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,10 +733,10 @@ 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 
+        return
       }
 
       const result = resp.result as SystemVersionInfo;

ui/src/utils.ts

@@ -94,6 +94,17 @@ export const formatters = {
   },
 };
 
+export function someIterable<T>(
+  iterable: Iterable<T>,
+  predicate: (item: T) => boolean,
+): boolean {
+  for (const item of iterable) {
+    if (predicate(item)) return true;
+  }
+
+  return false;
+}
+
 export const VIDEO = new Blob(
   [
     new Uint8Array([