your-ai-workflow-firebase-os 1.2.7 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "your-ai-workflow-firebase-os",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "A complete Firebase-powered admin OS — one React component.",
   "type": "module",
   "main": "dist/your-ai-workflow-firebase-os.cjs.js",
@@ -12,6 +12,11 @@
       "require": "./dist/your-ai-workflow-firebase-os.cjs.js",
       "types": "./dist/index.d.ts"
     },
+    "./renderer": {
+      "import": "./dist/renderer.es.js",
+      "require": "./dist/renderer.cjs.js",
+      "types": "./dist/renderer.d.ts"
+    },
     "./styles.css": {
       "default": "./dist/your-ai-workflow-firebase-os.css"
     },

package/scripts/postinstall.js

@@ -134,6 +134,11 @@ const appContent = `import { FirebaseOS } from 'your-ai-workflow-firebase-os';
 import { Home } from './your-ai-workflow-firebase-os/Home';
 import { themeConfig } from './your-ai-workflow-firebase-os/configs/theme.config';
 
+// Local Configuration Defaults (The Final Boss)
+import { defaultHomeConfig } from './your-ai-workflow-firebase-os/configs/pages/home.config';
+import { contactFormConfig } from './your-ai-workflow-firebase-os/configs/forms/contactForm.config';
+import { supportFormConfig } from './your-ai-workflow-firebase-os/configs/forms/supportForm.config';
+
 // Vite injects these from your .env file at dev/build time.
 const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
@@ -158,6 +163,11 @@ export default function App() {
       components={{
         Home: Home
       }}
+      defaultConfigs={{
+        home: defaultHomeConfig,
+        contactForm: contactFormConfig,
+        supportForm: supportFormConfig
+      }}
     />
   );
 }

package/src/FirebaseOS.tsx

@@ -44,6 +44,11 @@ export interface FirebaseOSProps {
     TemplateStorage?: React.ComponentType<any>;
     TemplateNone?: React.ComponentType<any>;
   };
+  defaultConfigs?: {
+    home?: any;
+    contactForm?: any;
+    supportForm?: any;
+  };
 }
 
 // ── The Library Component ────────────────────────────────────────────────
@@ -70,12 +75,13 @@ export function FirebaseOS(props: FirebaseOSProps) {
     onAuthChange: props.onAuthChange,
     themeConfig: props.themeConfig,
     components: props.components,
+    defaultConfigs: props.defaultConfigs,
   };
 
   return (
     <ConfigProvider config={config}>
       <ThemeProvider>
-        <div 
+        <div
           className="firebase-os flex-1 flex flex-col min-h-screen"
           style={{ background: 'var(--bg-gradient)', color: 'var(--fg-color)' }}
         >

package/src/components/ContactPopup.tsx

@@ -8,16 +8,7 @@ import { Input } from './Input';
 import { Button } from './Button';
 import { CustomSelect } from './CustomSelect';
 import { useTheme } from '../lib/ThemeContext';
-
-import { PhoneInput, defaultCountries } from 'react-international-phone';
-import 'react-international-phone/style.css';
-
-const popularCountryCodes = ['us', 'gb', 'ca', 'au', 'nz', 'ie', 'ae', 'sg'];
-const customizedCountries = [
-  ...defaultCountries.filter((c) => popularCountryCodes.includes(c[1])),
-  ...defaultCountries.filter((c) => !popularCountryCodes.includes(c[1]))
-];
-
+import React, { Suspense } from 'react';
 import { doc, getDoc } from 'firebase/firestore';
 import { useNavigate } from 'react-router-dom';
 
@@ -28,30 +19,12 @@ interface ContactPopupProps {
   isInline?: boolean;
 }
 
-function PhoneInputField({ field, value, onChange }: { field: any, value: string, onChange: (val: string) => void }) {
-  return (
-    <div className="flex flex-col w-full relative z-[99999]">
-       <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
-         {field.label} {field.required && <span className="text-red-500">*</span>}
-       </label>
-       <PhoneInput
-         defaultCountry="us"
-         countries={customizedCountries}
-         value={value}
-         onChange={(val) => onChange(val)}
-         forceDialCode={true}
-         className="w-full flex items-center rounded-xl text-[15px] text-foreground transition-all duration-300 focus-within:border-accent glow-focus glass-panel overflow-visible relative h-12"
-         inputClassName="flex-1 w-full !bg-transparent !border-none !outline-none !shadow-none px-3 text-[15px] text-foreground m-0 p-0 h-full tracking-[0.5px] no-glow"
-         countrySelectorStyleProps={{
-           buttonClassName: "!bg-transparent !border-0 border-r !border-[var(--panel-border)]/50 !outline-none !shadow-none !px-3 hover:!bg-foreground/5 transition-colors h-full !rounded-xl !rounded-r-none flex items-center justify-center shrink-0",
-         }}
-       />
-    </div>
-  );
-}
+// Lazy load heavy components only when requested by the form JSON
+const PhoneInputField = React.lazy(() => import('./PhoneInputField'));
 
-import { contactFormConfig } from '../configs/forms/contactForm.config';
-import { supportFormConfig } from '../configs/forms/supportForm.config';
+import { contactFormConfig as bundledContactConfig } from '../configs/forms/contactForm.config';
+import { supportFormConfig as bundledSupportConfig } from '../configs/forms/supportForm.config';
+import { useConfig } from '../lib/ConfigContext';
 
 export function ContactPopup({ onClose, formId, formConfig: propsConfig, isInline }: ContactPopupProps) {
   const [formData, setFormData] = useState<any>({});
@@ -62,6 +35,13 @@ export function ContactPopup({ onClose, formId, formConfig: propsConfig, isInlin
   const [formConfig, setFormConfig] = useState<any>(propsConfig || null);
   const [loadingConfig, setLoadingConfig] = useState(!propsConfig);
   const navigate = useNavigate();
+  const config = useConfig();
+  
+  const getFallback = (id: string) => {
+    if (id === 'contact') return config?.defaultConfigs?.contactForm || bundledContactConfig;
+    if (id === 'support') return config?.defaultConfigs?.supportForm || bundledSupportConfig;
+    return bundledContactConfig;
+  };
 
   useEffect(() => {
     if (propsConfig) {
@@ -70,24 +50,57 @@ export function ContactPopup({ onClose, formId, formConfig: propsConfig, isInlin
       return;
     }
 
+    // No formId at all → use contact default instantly
+    if (!formId) {
+      setFormConfig(getFallback('contact'));
+      setLoadingConfig(false);
+      return;
+    }
+
+    // For system forms (contact/support): only query Firestore if
+    // the user has actually customized the form (flag set by FormsAdmin on save).
+    // Otherwise use the local config file directly — zero network requests.
+    if (formId === 'contact' || formId === 'support') {
+      const hasCustom = localStorage.getItem(`fbos_custom_form_${formId}`);
+      if (!hasCustom) {
+        // No customizations — use local config instantly, skip Firestore
+        setFormConfig(getFallback(formId));
+        setLoadingConfig(false);
+        return;
+      }
+    }
+
+    // Either a custom form or a system form with customizations → query Firestore
+    // First, instantly render from cache to avoid loading spinner
+    try {
+      const cached = localStorage.getItem(`fbos_form_${formId}`);
+      if (cached) {
+        setFormConfig(JSON.parse(cached));
+        setLoadingConfig(false);
+      }
+    } catch (e) {}
+
     const fetchConfig = async () => {
       try {
-        if (!formId) {
-            setFormConfig(contactFormConfig);
-            return;
-        }
         const configDoc = await getDoc(doc(db, 'sys_forms', formId));
         if (configDoc.exists()) {
-          setFormConfig({ ...configDoc.data(), id: configDoc.id });
+          const data = { ...configDoc.data(), id: configDoc.id };
+          setFormConfig(data);
+          localStorage.setItem(`fbos_form_${formId}`, JSON.stringify(data));
         } else {
-           if (formId === 'contact') {
-               setFormConfig(contactFormConfig);
-           } else if (formId === 'support') {
-               setFormConfig(supportFormConfig);
-           }
+          // Doc doesn't exist (was reset/deleted) — use local config
+          if (formId === 'contact' || formId === 'support') {
+            setFormConfig(getFallback(formId));
+            // Clear the flag since the doc no longer exists
+            localStorage.removeItem(`fbos_custom_form_${formId}`);
+          }
         }
       } catch (err) {
         console.error('Failed to load form config:', err);
+        // On error, fall back to local config for system forms
+        if (formId === 'contact' || formId === 'support') {
+          setFormConfig(getFallback(formId));
+        }
       } finally {
         setLoadingConfig(false);
       }
@@ -261,12 +274,13 @@ export function ContactPopup({ onClose, formId, formConfig: propsConfig, isInlin
             }).map((field: any, idx: number) => {
               if (field.type === 'tel') {
                 return (
-                   <PhoneInputField
-                     key={idx}
-                     field={field}
-                     value={formData[field.name] || ''}
-                     onChange={val => setFormData({ ...formData, [field.name]: val })}
-                   />
+                   <Suspense key={idx} fallback={<div className="h-12 w-full glass-panel animate-pulse rounded-xl" />}>
+                     <PhoneInputField
+                       field={field}
+                       value={formData[field.name] || ''}
+                       onChange={val => setFormData({ ...formData, [field.name]: val })}
+                     />
+                   </Suspense>
                 );
               }
 

package/src/components/DashboardNav.tsx

@@ -44,18 +44,28 @@ export function DashboardNav({ customTabs = [] }: { customTabs?: Omit<TabItem, '
   const [tabOrder, setTabOrder] = useState<OrderItem[]>(defaultTabOrder);
 
   useEffect(() => {
+    // 1. Instant Cache Hydration
+    try {
+      const cachedTabs = localStorage.getItem('fbos_nav_tabs');
+      if (cachedTabs) setTabOverrides(JSON.parse(cachedTabs));
+      const cachedOrder = localStorage.getItem('fbos_nav_order');
+      if (cachedOrder) setTabOrder(JSON.parse(cachedOrder));
+    } catch(e) {}
+
+    // 2. Background Sync
     const unsubTabs = onSnapshot(collection(db, 'sys_tabs'), (snap) => {
       const overrides: Record<string, any> = {};
       snap.forEach(d => { overrides[d.id] = d.data(); });
       setTabOverrides(overrides);
+      localStorage.setItem('fbos_nav_tabs', JSON.stringify(overrides));
     });
 
     const unsubOrder = onSnapshot(doc(db, 'sys_configs', 'tab_order'), (d) => {
-      setTabOrder(
-        d.exists() && Array.isArray(d.data().order)
+      const orderData = d.exists() && Array.isArray(d.data().order)
           ? parseOrderItems(d.data().order)
-          : defaultTabOrder
-      );
+          : defaultTabOrder;
+      setTabOrder(orderData);
+      localStorage.setItem('fbos_nav_order', JSON.stringify(orderData));
     });
 
     return () => { unsubTabs(); unsubOrder(); };

package/src/components/PhoneInputField.tsx

@@ -0,0 +1,30 @@
+import { PhoneInput, defaultCountries } from 'react-international-phone';
+import 'react-international-phone/style.css';
+
+const popularCountryCodes = ['us', 'gb', 'ca', 'au', 'nz', 'ie', 'ae', 'sg'];
+const customizedCountries = [
+  ...defaultCountries.filter((c) => popularCountryCodes.includes(c[1])),
+  ...defaultCountries.filter((c) => !popularCountryCodes.includes(c[1]))
+];
+
+export default function PhoneInputField({ field, value, onChange }: { field: any, value: string, onChange: (val: string) => void }) {
+  return (
+    <div className="flex flex-col w-full relative z-[99999]">
+       <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
+         {field.label} {field.required && <span className="text-red-500">*</span>}
+       </label>
+       <PhoneInput
+         defaultCountry="us"
+         countries={customizedCountries}
+         value={value}
+         onChange={(val) => onChange(val)}
+         forceDialCode={true}
+         className="w-full flex items-center rounded-xl text-[15px] text-foreground transition-all duration-300 focus-within:border-accent glow-focus glass-panel overflow-visible relative h-12"
+         inputClassName="flex-1 w-full !bg-transparent !border-none !outline-none !shadow-none px-3 text-[15px] text-foreground m-0 p-0 h-full tracking-[0.5px] no-glow"
+         countrySelectorStyleProps={{
+           buttonClassName: "!bg-transparent !border-0 border-r !border-[var(--panel-border)]/50 !outline-none !shadow-none !px-3 hover:!bg-foreground/5 transition-colors h-full !rounded-xl !rounded-r-none flex items-center justify-center shrink-0",
+         }}
+       />
+    </div>
+  );
+}

package/src/configs/forms/index.ts

@@ -1,7 +1,5 @@
 import { contactFormConfig } from './contactForm.config';
 import { supportFormConfig } from './supportForm.config';
-import { pubFormConfig } from './pubForm.config';
-import { userFormConfig } from './userForm.config';
 
 export interface FormField {
   name: string;

package/src/lib/ConfigContext.tsx

@@ -30,6 +30,11 @@ export interface FirebaseOSConfig {
     TemplateStorage?: React.ComponentType<any>;
     TemplateNone?: React.ComponentType<any>;
   };
+  defaultConfigs?: {
+    home?: any;
+    contactForm?: any;
+    supportForm?: any;
+  };
 }
 
 const ConfigContext = createContext<FirebaseOSConfig>({});

package/src/lib/ThemeContext.tsx

@@ -1,7 +1,8 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import { themeConfig } from '../configs/theme.config';
+import { themeConfig as bundledThemeConfig } from '../configs/theme.config';
 import { doc, onSnapshot } from 'firebase/firestore';
 import { db } from './firebase';
+import { useConfig } from './ConfigContext';
 
 function deepMerge(target: any, source: any): any {
   if (typeof source !== 'object' || source === null) return source;
@@ -24,13 +25,16 @@ interface ThemeContextType {
   toggleTheme: () => void;
   isSystem: boolean;
   setIsSystem: (is: boolean) => void;
-  config: typeof themeConfig;
+  config: typeof bundledThemeConfig;
   activeConfig: any;
 }
 
 const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
 export function ThemeProvider({ children, scopeSelector }: { children: React.ReactNode, scopeSelector?: string }) {
+  const libConfig = useConfig();
+  const themeConfig = libConfig?.themeConfig || bundledThemeConfig;
+
   const [themeMode, setThemeMode] = useState<'light' | 'dark' | 'system'>(() => {
     const saved = localStorage.getItem('theme-mode') as 'light' | 'dark' | 'system' | null;
     return saved || themeConfig.defaultTheme;
@@ -38,20 +42,24 @@ export function ThemeProvider({ children, scopeSelector }: { children: React.Rea
 
   const [currentTheme, setCurrentTheme] = useState<Theme>('dark');
   const [activeConfig, setActiveConfig] = useState(() => {
+    // Start with local cache if available, otherwise use default
     try {
       const cached = localStorage.getItem('theme_config_cache');
       if (cached) return JSON.parse(cached);
     } catch (e) {}
     return themeConfig;
   });
-  const [isReady, setIsReady] = useState(() => !!localStorage.getItem('theme_config_cache'));
+  
+  // Always ready instantly (using default or cache)
+  const [isReady, setIsReady] = useState(true);
 
   useEffect(() => {
     if (!db) {
        setActiveConfig(themeConfig);
-       setIsReady(true);
        return;
     }
+
+    // Subscribe to Firestore in the background
     const unsub = onSnapshot(doc(db, 'sys_configs', 'theme'), (snap) => {
       if (snap.exists()) {
          const data = snap.data();
@@ -67,10 +75,10 @@ export function ThemeProvider({ children, scopeSelector }: { children: React.Rea
              setThemeMode(merged.defaultTheme);
          }
       } else {
+         // Doc was deleted (reset to default)
          setActiveConfig(themeConfig);
-         localStorage.setItem('theme_config_cache', JSON.stringify(themeConfig));
+         localStorage.removeItem('theme_config_cache');
       }
-      setIsReady(true);
     });
     return () => unsub();
   }, []);

package/src/main.tsx

@@ -6,12 +6,24 @@ import App from './App.tsx'
 import { ThemeProvider } from './lib/ThemeContext.tsx'
 import { ConfigProvider } from './lib/ConfigContext.tsx'
 
+import { defaultHomeConfig } from './configs/pages/home.config';
+import { contactFormConfig } from './configs/forms/contactForm.config';
+import { supportFormConfig } from './configs/forms/supportForm.config';
+import { themeConfig } from './configs/theme.config';
+
 // Keep body reset in standalone mode (FirebaseOS.tsx doesn't inject this)
 document.body.style.margin = '0';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ConfigProvider config={{}}>
+    <ConfigProvider config={{
+      defaultConfigs: {
+        home: defaultHomeConfig,
+        contactForm: contactFormConfig,
+        supportForm: supportFormConfig
+      },
+      themeConfig: themeConfig
+    }}>
       <ThemeProvider>
         <div className="firebase-os">
           <App />

package/src/pages/DynamicPage.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
-import { collection, getDocs, doc, getDoc } from 'firebase/firestore';
+import { collection, doc, getDoc, getDocs, query, where, limit } from 'firebase/firestore';
 import { db } from '../lib/firebase';
 import { ContactPopup } from '../components/ContactPopup';
 import { useAuth } from '../lib/AuthContext';
@@ -23,37 +23,64 @@ export function DynamicPage() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    let isMounted = true;
+
+    // 1. Instant Cache Render - O(1) lookup
+    const cachedMatch = localStorage.getItem(`fbos_route_${location.pathname}`);
+    if (cachedMatch) {
+      try {
+        const parsed = JSON.parse(cachedMatch);
+        setConfig(parsed);
+        setLoading(false);
+        const newTitle = parsed.pageName || parsed.tabName || parsed.title;
+        if (newTitle) document.title = newTitle;
+      } catch (e) {}
+    }
+
+    // 2. Background Sync with Highly Targeted Queries
     const fetchConfigs = async () => {
-      setLoading(true);
       try {
-        const [pubConfigsSnap, pubTabsSnap] = await Promise.all([
-          getDocs(collection(db, 'sys_pages')),
-          getDocs(collection(db, 'sys_tabs'))
+        let routeWithoutSlash = location.pathname;
+        if (routeWithoutSlash.startsWith('/')) routeWithoutSlash = routeWithoutSlash.substring(1);
+
+        // Execute targeted queries in parallel to drastically reduce fetching latency
+        const [
+          docPageReq, docTabReq, 
+          queryPageReq, queryPageNoSlashReq, 
+          queryTabReq, queryTabNoSlashReq
+        ] = await Promise.allSettled([
+            getDoc(doc(db, 'sys_pages', routeWithoutSlash)),
+            getDoc(doc(db, 'sys_tabs', routeWithoutSlash)),
+            getDocs(query(collection(db, 'sys_pages'), where('route', '==', location.pathname), limit(1))),
+            getDocs(query(collection(db, 'sys_pages'), where('route', '==', routeWithoutSlash), limit(1))),
+            getDocs(query(collection(db, 'sys_tabs'), where('route', '==', location.pathname), limit(1))),
+            getDocs(query(collection(db, 'sys_tabs'), where('route', '==', routeWithoutSlash), limit(1)))
         ]);
-        
+
         let matchedConfig: any = null;
         let matchedId: string | null = null;
 
-        const checkSnap = (snap: any, isPrivate: boolean) => {
-          snap.forEach((docSnap: any) => {
-             const d = docSnap.data();
-             let route = d.route;
-             if (route && !route.startsWith('/')) route = '/' + route;
-             
-             // System Pages have strict document IDs tracking their canonical path (e.g. 'contact')
-             const pathMatchesSystemId = ('/' + docSnap.id) === location.pathname;
-
-             if (route === location.pathname || pathMatchesSystemId) {
-                matchedConfig = { ...d, isPrivate, isAdmin: d.pageType === 'admin', isShared: d.pageType === 'shared' };
-                matchedId = docSnap.id;
-             }
-          });
+        const assignIfValid = (res: any, isTab: boolean) => {
+          if (matchedConfig) return;
+          if (res.status === 'fulfilled') {
+            if (res.value.exists && res.value.exists()) {
+              const d = res.value.data();
+              matchedConfig = { ...d, isPrivate: isTab, isAdmin: d.pageType === 'admin', isShared: d.pageType === 'shared' };
+              matchedId = res.value.id;
+            } else if (res.value.docs && res.value.docs.length > 0) {
+              const d = res.value.docs[0].data();
+              matchedConfig = { ...d, isPrivate: isTab, isAdmin: d.pageType === 'admin', isShared: d.pageType === 'shared' };
+              matchedId = res.value.docs[0].id;
+            }
+          }
         };
 
-        checkSnap(pubConfigsSnap, false);
-        if (!matchedConfig) {
-          checkSnap(pubTabsSnap, true);
-        }
+        assignIfValid(docPageReq, false);
+        assignIfValid(queryPageReq, false);
+        assignIfValid(queryPageNoSlashReq, false);
+        assignIfValid(docTabReq, true);
+        assignIfValid(queryTabReq, true);
+        assignIfValid(queryTabNoSlashReq, true);
 
         // Fallbacks for core pages if not customized yet
         if (!matchedConfig) {
@@ -66,45 +93,70 @@ export function DynamicPage() {
             }
         }
 
+        if (!isMounted) return;
+
         if (matchedConfig) {
-          if ((matchedId === 'contact' || matchedId === 'support') && !matchedConfig.form) {
-             matchedConfig.form = matchedId;
-          }
-          matchedConfig.pageId = matchedId;
-
-          // Hydrate form config immediately to prevent secondary loaders flashing on transitions
-          if (matchedConfig.form) {
-             const formDoc = await getDoc(doc(db, 'sys_forms', matchedConfig.form));
-             if (formDoc.exists()) {
-                 matchedConfig.formConfigOverride = { ...formDoc.data(), id: formDoc.id };
-             } else {
-                 if (matchedConfig.form === 'contact') {
-                     const { contactFormConfig } = await import('../configs/forms/contactForm.config');
-                     matchedConfig.formConfigOverride = contactFormConfig;
-                 } else if (matchedConfig.form === 'support') {
-                     const { supportFormConfig } = await import('../configs/forms/supportForm.config');
-                     matchedConfig.formConfigOverride = supportFormConfig;
+            if ((matchedId === 'contact' || matchedId === 'support') && !matchedConfig.form) {
+                matchedConfig.form = matchedId;
+            }
+            matchedConfig.pageId = matchedId;
+
+            // Immediately cache the highly optimized direct-route mapping
+            localStorage.setItem(`fbos_route_${location.pathname}`, JSON.stringify(matchedConfig));
+
+            // Hydrate form config instantly
+            if (matchedConfig.form) {
+               try {
+                 const cachedForm = localStorage.getItem(`fbos_form_${matchedConfig.form}`);
+                 if (cachedForm) matchedConfig.formConfigOverride = JSON.parse(cachedForm);
+               } catch (e) {}
+
+               getDoc(doc(db, 'sys_forms', matchedConfig.form)).then(async (formDoc) => {
+                 if (!isMounted) return;
+                 if (formDoc.exists()) {
+                     const data = { ...formDoc.data(), id: formDoc.id };
+                     setConfig((prev: any) => ({ ...prev, formConfigOverride: data }));
+                     localStorage.setItem(`fbos_form_${matchedConfig.form}`, JSON.stringify(data));
+                 } else {
+                     let defaultCfg;
+                     if (matchedConfig.form === 'contact') {
+                         const { contactFormConfig } = await import('../configs/forms/contactForm.config');
+                         defaultCfg = contactFormConfig;
+                     } else if (matchedConfig.form === 'support') {
+                         const { supportFormConfig } = await import('../configs/forms/supportForm.config');
+                         defaultCfg = supportFormConfig;
+                     }
+                     if (defaultCfg) {
+                       setConfig((prev: any) => ({ ...prev, formConfigOverride: defaultCfg }));
+                       localStorage.setItem(`fbos_form_${matchedConfig.form}`, JSON.stringify(defaultCfg));
+                     }
                  }
-             }
-          }
+               });
+            }
 
-          // Update Document Title matching pageName/tabName globally
-          const newTitle = matchedConfig.pageName || matchedConfig.tabName || matchedConfig.title;
-          if (newTitle) {
-              document.title = newTitle;
-          }
-          
-          setConfig(matchedConfig);
+            const newTitle = matchedConfig.pageName || matchedConfig.tabName || matchedConfig.title;
+            if (newTitle) {
+                document.title = newTitle;
+            }
+            
+            setConfig(matchedConfig);
+            setLoading(false);
         } else {
-          setConfig('not-found');
+            setConfig('not-found');
+            setLoading(false);
+            localStorage.removeItem(`fbos_route_${location.pathname}`);
         }
+
       } catch (err) {
-        setConfig('not-found');
-      } finally {
-        setLoading(false);
+        if (isMounted && loading) {
+          setConfig('not-found');
+          setLoading(false);
+        }
       }
     };
     fetchConfigs();
+
+    return () => { isMounted = false; };
   }, [location.pathname]);
 
   const [showLoader, setShowLoader] = useState(false);