updates

Frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, lazy, Suspense } from 'react';
+import { useLocation } from 'react-router-dom';
 import { 
   BrowserRouter, 
   Routes, 
@@ -7,12 +8,11 @@ import {
 } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { GlobalLoadingProvider } from './contexts/GlobalLoadingContext';
+import { LoadingProvider, useNavigationLoading, useLoading } from './contexts/LoadingContext';
 import { CookieConsentProvider } from './contexts/CookieConsentContext';
 import { CurrencyProvider } from './contexts/CurrencyContext';
 import { CompanySettingsProvider } from './contexts/CompanySettingsContext';
 import { AuthModalProvider } from './contexts/AuthModalContext';
-import { NavigationLoadingProvider, useNavigationLoading } from './contexts/NavigationLoadingContext';
 import { AntibotProvider } from './contexts/AntibotContext';
 import OfflineIndicator from './components/common/OfflineIndicator';
 import CookieConsentBanner from './components/common/CookieConsentBanner';
@@ -66,6 +66,8 @@ const RefundsPolicyPage = lazy(() => import('./pages/RefundsPolicyPage'));
 const CancellationPolicyPage = lazy(() => import('./pages/CancellationPolicyPage'));
 const AccessibilityPage = lazy(() => import('./pages/AccessibilityPage'));
 const FAQPage = lazy(() => import('./pages/FAQPage'));
+const BlogPage = lazy(() => import('./pages/BlogPage'));
+const BlogDetailPage = lazy(() => import('./pages/BlogDetailPage'));
 
 const AdminDashboardPage = lazy(() => import('./pages/admin/DashboardPage'));
 const InvoiceManagementPage = lazy(() => import('./pages/admin/InvoiceManagementPage'));
@@ -88,6 +90,7 @@ const PackageManagementPage = lazy(() => import('./pages/admin/PackageManagement
 const SecurityManagementPage = lazy(() => import('./pages/admin/SecurityManagementPage'));
 const EmailCampaignManagementPage = lazy(() => import('./pages/admin/EmailCampaignManagementPage'));
 const ReviewManagementPage = lazy(() => import('./pages/admin/ReviewManagementPage'));
+const BlogManagementPage = lazy(() => import('./pages/admin/BlogManagementPage'));
 
 const StaffDashboardPage = lazy(() => import('./pages/staff/DashboardPage'));
 const StaffBookingManagementPage = lazy(() => import('./pages/staff/BookingManagementPage'));
@@ -108,6 +111,26 @@ const AccountantLayout = lazy(() => import('./pages/AccountantLayout'));
 
 const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));
 
+// Component to track navigation changes - must be inside Router
+const NavigationTracker: React.FC = () => {
+  const { pathname } = useLocation();
+  const { setNavigationLoading } = useLoading();
+  
+  useEffect(() => {
+    // Show navigation loading when route changes
+    setNavigationLoading(true);
+    
+    // Hide navigation loading after a short delay
+    const timer = setTimeout(() => {
+      setNavigationLoading(false);
+    }, 300);
+    
+    return () => clearTimeout(timer);
+  }, [pathname, setNavigationLoading]);
+  
+  return null;
+};
+
 // Wrapper component to use navigation loading hook inside CompanySettingsProvider
 const PreloaderWrapper: React.FC = () => {
   const { isLoading } = useNavigationLoading();
@@ -131,7 +154,12 @@ function App() {
 
   
   useEffect(() => {
-    initializeAuth();
+    // Initialize auth asynchronously to validate cookies
+    initializeAuth().catch((error) => {
+      // Silently handle auth initialization errors
+      // User will be prompted to login if needed
+      console.debug('Auth initialization failed:', error);
+    });
   }, [initializeAuth]);
 
   
@@ -158,7 +186,7 @@ function App() {
   };
 
   return (
-    <GlobalLoadingProvider>
+    <LoadingProvider>
       <CookieConsentProvider>
         <CurrencyProvider>
           <CompanySettingsProvider>
@@ -170,9 +198,9 @@ function App() {
           v7_relativeSplatPath: true,
         }}
       >
-        <NavigationLoadingProvider>
           <PreloaderWrapper />
           <ScrollToTop />
+          <NavigationTracker />
           <Suspense fallback={<Loading fullScreen text="Loading page..." />}>
           <Routes>
         {}
@@ -279,6 +307,14 @@ function App() {
             path="faq" 
             element={<FAQPage />} 
           />
+          <Route 
+            path="blog" 
+            element={<BlogPage />} 
+          />
+          <Route 
+            path="blog/:slug" 
+            element={<BlogDetailPage />} 
+          />
           
           {}
           <Route 
@@ -471,6 +507,10 @@ function App() {
             path="reviews" 
             element={<ReviewManagementPage />} 
           />
+          <Route
+            path="blog" 
+            element={<BlogManagementPage />} 
+          />
         </Route>
 
         {}
@@ -580,14 +620,13 @@ function App() {
           <AnalyticsLoader />
           <AuthModalManager />
         </Suspense>
-        </NavigationLoadingProvider>
       </BrowserRouter>
               </AuthModalProvider>
             </AntibotProvider>
           </CompanySettingsProvider>
         </CurrencyProvider>
       </CookieConsentProvider>
-    </GlobalLoadingProvider>
+    </LoadingProvider>
   );
 }