From 39f1cae171d599b58f27f650998c2dc24163c7ab Mon Sep 17 00:00:00 2001 From: Tanisha Shrivas Date: Thu, 11 Jul 2024 20:32:57 +0530 Subject: [PATCH] lazy loading implementation --- src/App.jsx | 41 ++++++++++++++++++++--------------------- src/main.jsx | 51 ++++++++++++++++++++++++++------------------------- 2 files changed, 46 insertions(+), 46 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 5a81f61..790cb1c 100644 --- a/src/App.jsx +++ b/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 ? ( ) : ( - <> - - - -
- - - - - - + Loading...}> + <> + + + +
+ + + + + +
)} - ); } export default App; - - - diff --git a/src/main.jsx b/src/main.jsx index 31502bf..08ef9c3 100644 --- a/src/main.jsx +++ b/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( - - {" "} - {/* Place Navbar outside of Routes to ensure it's always visible */} - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + {/* Place Navbar outside of Routes to ensure it's always visible */} + Loading...}> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + {/* Include Chatbot */} );