fix: remote desktop blank screen

src/locales/en.json

@@ -537,7 +537,9 @@
     "remove": "Remove",
     "revoke": "Revoke",
     "create": "Create",
-    "update": "Update"
+    "update": "Update",
+    "pageOutdated": "This page is outdated. Please refresh to load the latest version.",
+    "refreshPage": "Refresh Page"
   },
   "nav": {
     "home": "Home",

src/ui/desktop/navigation/AppView.tsx

@@ -1,4 +1,6 @@
 import React, {
+  Component,
+  type ErrorInfo,
   Suspense,
   lazy,
   useEffect,
@@ -26,6 +28,61 @@ import { useTheme } from "@/components/theme-provider";
 import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
 import { useTranslation } from "react-i18next";
 
+class ChunkErrorBoundaryInner extends Component<
+  { children: React.ReactNode; message: string; buttonLabel: string },
+  { hasChunkError: boolean }
+> {
+  constructor(props: {
+    children: React.ReactNode;
+    message: string;
+    buttonLabel: string;
+  }) {
+    super(props);
+    this.state = { hasChunkError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    const isChunkError =
+      error.name === "ChunkLoadError" ||
+      /Loading chunk \d+ failed/i.test(error.message) ||
+      /Failed to fetch dynamically imported module/i.test(error.message) ||
+      /error loading dynamically imported module/i.test(error.message);
+    if (isChunkError) return { hasChunkError: true };
+    throw error;
+  }
+
+  componentDidCatch(_error: Error, _info: ErrorInfo) {}
+
+  render() {
+    if (this.state.hasChunkError) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full gap-3 text-sm text-[var(--text-secondary)]">
+          <span>{this.props.message}</span>
+          <button
+            className="px-3 py-1.5 rounded bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)] transition-colors"
+            onClick={() => window.location.reload()}
+          >
+            {this.props.buttonLabel}
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function ChunkErrorBoundary({ children }: { children: React.ReactNode }) {
+  const { t } = useTranslation();
+  return (
+    <ChunkErrorBoundaryInner
+      message={t("common.pageOutdated")}
+      buttonLabel={t("common.refreshPage")}
+    >
+      {children}
+    </ChunkErrorBoundaryInner>
+  );
+}
+
 const Terminal = lazy(() =>
   import("@/ui/desktop/apps/features/terminal/Terminal.tsx").then((module) => ({
     default: module.Terminal,
@@ -449,6 +506,7 @@ export function AppView({
                     : "var(--bg-base)",
                 }}
               >
+                <ChunkErrorBoundary>
                   <Suspense
                     fallback={
                       <SimpleLoader
@@ -554,6 +612,7 @@ export function AppView({
                       />
                     )}
                   </Suspense>
+                </ChunkErrorBoundary>
               </div>
             </div>
           );