add lazy loading

src/App.js

@@ -1,10 +1,12 @@
-import { useEffect } from "react";
+import React, { useEffect, Suspense } from "react";
 import { Route, Routes, Navigate } from "react-router-dom";
-import Home from "./pages/Home";
-import Checkout from "./pages/Checkout";
 import { useDispatch, useSelector } from "react-redux";
 import { getCartData, sendCartData } from "./store/cart-actions";
-import NotFound from "./pages/NotFound";
+import LoadingSpinner from "./components/UI/LoadingSpinner";
+import Home from "./pages/Home";
+
+const Checkout = React.lazy(() => import("./pages/Checkout"));
+const NotFound = React.lazy(() => import("./pages/NotFound"));
 
 let isInitial = true;
 
@@ -26,12 +28,14 @@ function App() {
   }, [cart, dispatch]);
 
   return (
-    <Routes>
-      <Route path="/" element={<Navigate to="/home" />} />
-      <Route path="/home" element={<Home />} />
-      <Route path="/checkout" element={<Checkout />} />
-      <Route path="*" element={<NotFound />} />
-    </Routes>
+    <Suspense fallback={<LoadingSpinner />}>
+      <Routes>
+        <Route path="/" element={<Navigate to="/home" />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="/checkout" element={<Checkout />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </Suspense>
   );
 }
 

src/components/Items/ItemsList.js

@@ -73,9 +73,9 @@ const ItemsList = () => {
   if (isLoading) {
     return (
       <section className={styles["items-section"]}>
-        <p className={styles.loading}>
+        <div className={styles.loading}>
           Loading <span className="loading dots2"></span>{" "}
-        </p>
+        </div>
       </section>
     );
   }

src/components/UI/LoadingSpinner.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./LoadingSpinner.module.css";
+
+const LoadingSpinner = () => {
+  return (
+    <div>
+      <p className={styles.loading}>
+        Loading <span className="loading dots2"></span>
+      </p>
+    </div>
+  );
+};
+
+export default LoadingSpinner;

src/components/UI/LoadingSpinner.module.css

@@ -0,0 +1,6 @@
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}