Dental v1 done

apps/Frontend/src/App.tsx

@@ -1,37 +1,43 @@
 import { Switch, Route } from "wouter";
+import React, { Suspense, lazy } from "react";
 import { queryClient } from "./lib/queryClient";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "./components/ui/toaster";
 import { TooltipProvider } from "./components/ui/tooltip";
-import NotFound from "./pages/not-found";
-import Dashboard from "./pages/dashboard";
-import AuthPage from "./pages/auth-page";
-import AppointmentsPage from "./pages/appointments-page";
-import PatientsPage from "./pages/patients-page";
 import { ProtectedRoute } from "./lib/protected-route";
 import { AuthProvider } from "./hooks/use-auth";
-import SettingsPage from "./pages/settings-page";
+
+import Dashboard from "./pages/dashboard"; 
+import LoadingScreen from "./components/ui/LoadingScreen";
+const AuthPage = lazy(() => import("./pages/auth-page"));
+const AppointmentsPage = lazy(() => import("./pages/appointments-page"));
+const PatientsPage = lazy(() => import("./pages/patients-page"));
+const SettingsPage = lazy(() => import("./pages/settings-page"));
+const NotFound = lazy(() => import("./pages/not-found"));
 
 function Router() {
   return (
     <Switch>
-      <ProtectedRoute path="/" component={Dashboard} />
-      <ProtectedRoute path="/appointments" component={AppointmentsPage} />
-      <ProtectedRoute path="/patients" component={PatientsPage} />
-      <ProtectedRoute path="/settings" component={SettingsPage}/>
-      <Route path="/auth" component={AuthPage} />
-      <Route component={NotFound} />
+      <ProtectedRoute path="/" component={() => <Dashboard />} />
+      <ProtectedRoute path="/appointments" component={() => <AppointmentsPage />} />
+      <ProtectedRoute path="/patients" component={() => <PatientsPage />} />
+      <ProtectedRoute path="/settings" component={() => <SettingsPage />} />
+      <Route path="/auth" component={() => <AuthPage />} />
+      <Route component={() => <NotFound />} />
     </Switch>
   );
 }
 
+
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <AuthProvider>
         <TooltipProvider>
           <Toaster />
-          <Router />
+          <Suspense fallback={<LoadingScreen />}>
+            <Router />
+          </Suspense>
         </TooltipProvider>
       </AuthProvider>
     </QueryClientProvider>