Lazy/On Demand Loading

Author: hrithikapps

App.js

@@ -1,15 +1,19 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import Body from "./src/components/Body";
 import Header from "./src/components/Header";
 import Footer from "./src/components/Footer";
-import About from "./src/components/About";
-import ContactUs from "./src/components/ContactUs";
 import Cart from "./src/components/Cart";
 import Error from "./src/components/Error";
 import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
 import RestaurantMenu from "./src/components/RestaurantMenu";
-import Profile from "./src/components/Profile";
+// import Profile from "./src/components/Profile";
+// import About from "./src/components/About";
+// import ContactUs from "./src/components/ContactUs";
+
+const Profile = lazy(() => import("./src/components/Profile"));
+const ContactUs = lazy(() => import("./src/components/ContactUs"));
+const About = lazy(() => import("./src/components/About"));
 
 const AppLayout = () => {
   return (
@@ -34,17 +38,29 @@ const appRouter = createBrowserRouter([
       },
       {
         path: "/about",
-        element: <About />,
+        element: (
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <About />
+          </Suspense>
+        ),
         children: [
           {
             path: "profile",
-            element: <Profile />,
+            element: (
+              <Suspense>
+                <Profile />
+              </Suspense>
+            ),
           },
         ],
       },
       {
         path: "/contactUs",
-        element: <ContactUs />,
+        element: (
+          <Suspense>
+            <ContactUs />
+          </Suspense>
+        ),
       },
       {
         path: "/cart",

src/components/Body.js

@@ -4,19 +4,12 @@ import { useState, useEffect } from "react";
 import { Shimmer } from "./Shimmer";
 import { Link } from "react-router-dom";
 import { filterData } from "../utils/Helper";
-
-// function filterData(searchText, restaurant) {
-//   const filterData = restaurant.filter((restaurants) =>
-//     restaurants?.data.name?.toLowerCase().includes(searchText.toLowerCase())
-//   );
-//   return filterData;
-// }
+import useOnline from "../utils/useOnline";
 
 const Body = () => {
   const [filteredRestaurant, setFilteredRestaurant] = useState([]);
   const [allRestaturants, setAllRestaurants] = useState([]);
   const [searchText, setSearchText] = useState("");
-  // console.log("Consoling");
 
   useEffect(() => {
     getRestaurants();
@@ -35,6 +28,14 @@ const Body = () => {
     setAllRestaurants(json?.data?.success?.cards[0]?.favourite?.cards);
   }
 
+  const isOnline = useOnline();
+  if (!isOnline)
+    return (
+      <h1>
+        🔴 OOPS ! Something went wrong, Please check your internet connection
+      </h1>
+    );
+
   //Not rendering the component (Early Return)
   if (!allRestaturants) {
     return null;

src/components/RestaurantMenu.js

@@ -8,10 +8,8 @@ const RestaurantMenu = () => {
 
   const [restaurant, setRestaurant] = useState(null);
   const [menuItems, setmenuItems] = useState(null);
-  // const useEffect=(()=>{
-  //   const {restaurantInfo,menu}=
-  // },restaurant)
 
+  
   useEffect(() => {
     getRestaurants();
   }, []);
@@ -78,7 +76,6 @@ const RestaurantMenu = () => {
                       alt="foodImage"
                     />
                   )}
-
                   <h5>{insideMenu?.name}</h5>
                   <h4>{insideMenu?.price / 100}</h4>
                 </div>
@@ -93,4 +90,3 @@ const RestaurantMenu = () => {
 };
 export default RestaurantMenu;
 
-// map/card/info

src/utils/useOnline.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+const useOnline = () => {
+  const [isOnline, setIsOnline] = useState(true);
+
+  useEffect(() => {
+    const handleOnline = () => {
+      setIsOnline(true);
+    };
+    const handleOffline = () => {
+      setIsOnline(false);
+    };
+
+    document.addEventListener("online", handleOnline);
+    document.addEventListener("offline", handleOffline);
+
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+
+  return isOnline; //Returns True/False
+};
+export default useOnline;