Improve settings initialization and update handling

Added checks for settings.isInitialized before rendering and in effects to prevent premature execution. Updated settings update logic to filter out null and undefined values, avoiding unintended resets. Ensures components wait for settings to load before rendering or reacting to changes.

Author: JohnDuprey

src/components/CippComponents/CippTenantSelector.jsx

@@ -205,7 +205,7 @@ export const CippTenantSelector = (props) => {
 
   // This effect handles when the URL parameter changes externally
   useEffect(() => {
-    if (!router.isReady || !tenantList.isSuccess) return;
+    if (!router.isReady || !tenantList.isSuccess || !settings.isInitialized) return;
 
     // Get the current tenant from URL or settings
     const urlTenant = router.query.tenantFilter || settings.currentTenant;
@@ -230,11 +230,11 @@ export const CippTenantSelector = (props) => {
         });
       }
     }
-  }, [router.isReady, router.query.tenantFilter, tenantList.isSuccess, settings.currentTenant]);
+  }, [router.isReady, router.query.tenantFilter, tenantList.isSuccess, settings.currentTenant, settings.isInitialized]);
 
   // This effect ensures the tenant filter parameter is included in the URL when missing
   useEffect(() => {
-    if (!router.isReady || !settings.currentTenant) return;
+    if (!router.isReady || !settings.isInitialized || !settings.currentTenant) return;
 
     // If the tenant parameter is missing from the URL but we have it in settings
     if (!router.query.tenantFilter && settings.currentTenant) {
@@ -248,7 +248,7 @@ export const CippTenantSelector = (props) => {
         { shallow: true }
       );
     }
-  }, [router.isReady, router.query, settings.currentTenant]);
+  }, [router.isReady, router.query, settings.currentTenant, settings.isInitialized]);
 
   useEffect(() => {
     if (tenant && currentTenant?.value && currentTenant?.value !== "AllTenants") {

src/contexts/settings-context.js

@@ -132,14 +132,22 @@ export const SettingsProvider = (props) => {
 
   const handleUpdate = useCallback((settings) => {
     setState((prevState) => {
+      // Filter out null and undefined values to prevent resetting settings
+      const filteredSettings = Object.entries(settings).reduce((acc, [key, value]) => {
+        if (value !== null && value !== undefined) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+
       storeSettings({
         ...prevState,
-        ...settings,
+        ...filteredSettings,
       });
 
       return {
         ...prevState,
-        ...settings,
+        ...filteredSettings,
       };
     });
   }, []);

src/pages/_app.js

@@ -367,6 +367,7 @@ const App = (props) => {
               <SettingsConsumer>
                 {(settings) => {
                   if (!settings.isInitialized) {
+                    return null; // Don't render until settings are loaded
                   }
                   const theme = createTheme({
                     colorPreset: "orange",