lazy loading implementation

src/App.jsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useState, Suspense, lazy } from 'react';
 import Navbar from './components/Navbar';
-import Home from './components/Home';
-import AboutUs from './components/AboutUs';
-import DemoSection from './components/DemoSection';
-import ContactUs from './components/ContactUs';
-import Models from './components/Models';
 import Preloader from './components/Preloader';
 import GoToTop from './components/BottomToTop';
 
+// Lazy load components
+const Home = lazy(() => import('./components/Home'));
+const AboutUs = lazy(() => import('./components/AboutUs'));
+const DemoSection = lazy(() => import('./components/DemoSection'));
+const ContactUs = lazy(() => import('./components/ContactUs'));
+const Models = lazy(() => import('./components/Models'));
+
 const App = () => {
   const [loading, setLoading] = useState(true);
 
@@ -20,24 +22,21 @@ const App = () => {
       {loading ? (
         <Preloader onLoaded={handleLoaded} />
       ) : (
-        <>
-      <Navbar />
-      <Home />
-      <GoToTop />
-      <hr/>
-
-      <DemoSection />
-      <ContactUs />
-      <AboutUs />
-      <Models/>
-      </>
+        <Suspense fallback={<div>Loading...</div>}>
+          <>
+            <Navbar />
+            <Home />
+            <GoToTop />
+            <hr />
+            <DemoSection />
+            <ContactUs />
+            <AboutUs />
+            <Models />
+          </>
+        </Suspense>
       )}
-
     </div>
   );
 }
 
 export default App;
-
-
-

src/main.jsx

@@ -1,38 +1,39 @@
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Home from "./components/Home";
-import AboutUs from "./components/AboutUs";
-import DemoSection from "./components/DemoSection";
-import ContactUs from "./components/ContactUs";
 import Navbar from "./components/Navbar";
-import Models from "./components/Models";
 import Custom404 from "./components/Custom404";
 import "./main.css";
-import Privacy from "./components/Privacy";
-import Licensing from "./components/licensing.jsx";
-import Terms from "./components/Terms";
-import ChatbotComponent from "./components/Chatbot"; // Import Chatbot
 import Preloader from "./components/Preloader";
-import App from './App.jsx';
+import ChatbotComponent from "./components/Chatbot"; // Import Chatbot
+
+// Lazy load components
+const Home = lazy(() => import("./components/Home"));
+const AboutUs = lazy(() => import("./components/AboutUs"));
+const DemoSection = lazy(() => import("./components/DemoSection"));
+const ContactUs = lazy(() => import("./components/ContactUs"));
+const Models = lazy(() => import("./components/Models"));
+const Privacy = lazy(() => import("./components/Privacy"));
+const Licensing = lazy(() => import("./components/licensing.jsx"));
+const Terms = lazy(() => import("./components/Terms"));
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Router>
-
     <Preloader />
-    <Navbar />{" "}
-    {/* Place Navbar outside of Routes to ensure it's always visible */}
-    <Routes>
-      <Route exact path='/' element={<Home />} />
-      <Route exact path='/AboutUs' element={<AboutUs />} />
-      <Route exact path='/DemoSection' element={<DemoSection />} />
-      <Route exact path='/ContactUs' element={<ContactUs />} />
-      <Route exact path='/Models' element={<Models />} />
-      <Route exact path='/privacy-policy' element={<Privacy />} />
-      <Route exact path='/licensing' element={<Licensing />} />
-      <Route exact path='/terms-and-conditions' element={<Terms />} />
-      <Route path='*' element={<Custom404 />} />
-    </Routes>
+    <Navbar /> {/* Place Navbar outside of Routes to ensure it's always visible */}
+    <Suspense fallback={<div>Loading...</div>}>
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route exact path="/AboutUs" element={<AboutUs />} />
+        <Route exact path="/DemoSection" element={<DemoSection />} />
+        <Route exact path="/ContactUs" element={<ContactUs />} />
+        <Route exact path="/Models" element={<Models />} />
+        <Route exact path="/privacy-policy" element={<Privacy />} />
+        <Route exact path="/licensing" element={<Licensing />} />
+        <Route exact path="/terms-and-conditions" element={<Terms />} />
+        <Route path="*" element={<Custom404 />} />
+      </Routes>
+    </Suspense>
     <ChatbotComponent /> {/* Include Chatbot */}
   </Router>
 );