Fix mobile white screen from Outlet remount loop (#54).

Stop keying protected routes with Date.now(), which remounted the dashboard on every context update, and memoize the styled-components theme so ParticleBackground stops restarting each render.

llm-fe/src/App.tsx

@@ -34,7 +34,7 @@ const ProtectedRoutes = () => {
   if (!authenticated) return <Navigate to='/signin/' replace />
   //if(!needsNewPassword) return <Navigate to='/password_reset/' replace/>
 
-  return <Outlet key={Date.now()} />
+  return <Outlet />
 }
 
 

llm-fe/src/llm-fe/components/GlobalThemeWrapper/GlobalThemeWrapper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { useMaterialUIController } from '../../ui-kit/context';
 import palettes from '../../ui-kit/assets/theme/base/palettes';
@@ -11,14 +11,13 @@ const GlobalThemeWrapper = ({ children }: GlobalThemeWrapperProps): JSX.Element
     const [controller] = useMaterialUIController();
     const { themeColor, darkMode } = controller;
 
-    // Default to blue if themeColor is not found
+    // Stable theme ref — ParticleBackground restarts its canvas whenever theme identity changes.
+    const theme = useMemo(() => {
         const selectedPalette = palettes[themeColor as keyof typeof palettes] || palettes.blue;
-
+        return {
-    const theme = {
             main: selectedPalette.main,
             focus: selectedPalette.focus,
             darkMode: darkMode,
-        // Add other global theme variables here if needed
             colors: {
                 background: darkMode ? '#1a2035' : '#f0f2f5',
                 text: darkMode ? '#ffffff' : '#344767',
@@ -26,6 +25,7 @@ const GlobalThemeWrapper = ({ children }: GlobalThemeWrapperProps): JSX.Element
                 cardBorder: darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
             }
         };
+    }, [themeColor, darkMode]);
 
     return (
         <ThemeProvider theme={theme}>