Fix theme config render-phase updates

src/ui/App.jsx

@@ -15,7 +15,7 @@ import * as envModuleRef from '../platform/env.js';
 import { getConfig, setConfig, CONFIG_KEYS, createLogger, startTrace, isDevelopment } from '../platform/env.js';
 import { EmptyShell, LandingShell, DashboardShell, AppInfo, Router } from './components/index.js';
 import { LoginPage } from '../security/pages/LoginPage.jsx';
-import { getStyleTheme, DEFAULT_STYLE_THEME, normalizeStyleThemeName } from './styles/index.js';
+import { getStyleTheme, DEFAULT_STYLE_THEME, normalizeStyleThemeName, setActiveStyleThemeName } from './styles/index.js';
 import { THEME_MODE_CONFIG_KEY, THEME_NAME_CONFIG_KEY, THEME_MODES, themeManager } from './theme-controller.js';
 import { securityService, useSecurityState } from '../security/runtime/security-service.js';
 // ============================================================================
@@ -35,6 +35,7 @@ import { getSystemThemeMode, subscribeToSystemThemeMode } from '../platform/comp
  */
 const AppContext = createContext(null);
 const appLogger = createLogger('App');
+const tamaguiConfigCache = new Map();
 
 function resolveShellComponent(shellName = 'EmptyShell') {
   const key = String(shellName ?? 'EmptyShell').trim().toLowerCase();
@@ -52,6 +53,17 @@ function resolveShellComponent(shellName = 'EmptyShell') {
   }
 }
 
+function getCachedTamaguiConfig(styleThemeName) {
+  const resolvedThemeName = normalizeStyleThemeName(styleThemeName);
+  if (tamaguiConfigCache.has(resolvedThemeName)) {
+    return tamaguiConfigCache.get(resolvedThemeName);
+  }
+
+  const config = createTamagui(getStyleTheme(resolvedThemeName));
+  tamaguiConfigCache.set(resolvedThemeName, config);
+  return config;
+}
+
 // ============================================================================
 // App Component
 // ============================================================================
@@ -71,6 +83,7 @@ function App({ onInit, renderBootScreen = null, showInitialBootSplash = false, i
   const [themeMode, setThemeModeState] = useState(THEME_MODES.SYSTEM);
   const [systemScheme, setSystemScheme] = useState(getSystemThemeMode());
   const [styleThemeName, setStyleThemeName] = useState(DEFAULT_STYLE_THEME);
+  const [themePreferencesLoaded, setThemePreferencesLoaded] = useState(false);
   const securityState = useSecurityState();
 
   // Initialize theme manager
@@ -80,11 +93,9 @@ function App({ onInit, renderBootScreen = null, showInitialBootSplash = false, i
 
   // Get style theme configuration
   const styleTheme = useMemo(() => getStyleTheme(styleThemeName), [styleThemeName]);
-  
+
   // Create Tamagui config from style theme
-  const tamaguiConfig = useMemo(() => {
-    return createTamagui(styleTheme);
-  }, [styleTheme]);
+  const tamaguiConfig = useMemo(() => getCachedTamaguiConfig(styleThemeName), [styleThemeName]);
   
   // Calculate active theme (light/dark variant)
   const activeTheme = themeMode === THEME_MODES.SYSTEM ? systemScheme : themeMode;
@@ -94,6 +105,10 @@ function App({ onInit, renderBootScreen = null, showInitialBootSplash = false, i
     themeManager.updateState(themeMode, systemScheme, activeTheme, styleThemeName);
   }, [themeMode, systemScheme, activeTheme, styleThemeName]);
 
+  useEffect(() => {
+    setActiveStyleThemeName(styleThemeName);
+  }, [styleThemeName]);
+
   // Load theme preferences from storage on mount
   useEffect(() => {
     async function loadThemePreferences() {
@@ -111,6 +126,8 @@ function App({ onInit, renderBootScreen = null, showInitialBootSplash = false, i
         }
       } catch (error) {
         console.warn('[App] Failed to load theme preferences:', error);
+      } finally {
+        setThemePreferencesLoaded(true);
       }
     }
     
@@ -136,10 +153,10 @@ function App({ onInit, renderBootScreen = null, showInitialBootSplash = false, i
       }
     }
     
-    if (themeMode !== THEME_MODES.SYSTEM || systemScheme) {
+    if (themePreferencesLoaded) {
       saveThemePreference();
     }
-  }, [themeMode]);
+  }, [themeMode, themePreferencesLoaded]);
   
   // Save style theme preference to storage when it changes
   useEffect(() => {
@@ -151,8 +168,10 @@ function App({ onInit, renderBootScreen = null, showInitialBootSplash = false, i
       }
     }
     
-    saveStyleThemePreference();
-  }, [styleThemeName]);
+    if (themePreferencesLoaded) {
+      saveStyleThemePreference();
+    }
+  }, [styleThemeName, themePreferencesLoaded]);
 
   /**
    * Get platform services for module injection