spit codes to lazy loading to improve the performance

src/App.js

@@ -1,13 +1,15 @@
-import { useEffect } from 'react';
+import { useEffect, lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Home from './routes/home/home.component';
 import Navigation from './routes/navigation/navigation.component';
-import Authentication from './routes/authentication/authentication.component';
-import Shop from './routes/shop/shop.component';
 import Checkout from './routes/checkout/checkout.component';
 import { onAuthStateChangeListener, createUserDocumentFromAuth } from './utils/firebase/firebase.utils';
 import { useDispatch } from 'react-redux';
 import { setUser } from './store/user/user.slice';
+import Spinner from './components/spinner/spinner.component';
+
+const Shop = lazy(()=> import('./routes/shop/shop.component'));
+const Authentication = lazy(()=>import('./routes/authentication/authentication.component'));
 
 const App = ()=> {
   const dispatch = useDispatch();
@@ -29,14 +31,16 @@ const App = ()=> {
   }, [dispatch]);
 
   return (
-    <Routes>
-      <Route path="/" element={<Navigation />}>
-        <Route index element={<Home/>} />
-        <Route path='shop/*' element={<Shop />} />
-        <Route path='auth' element={<Authentication />} />
-        <Route path='checkout' element={<Checkout />} />
-      </Route>
-    </Routes>
+    <Suspense callback={<Spinner />}>
+      <Routes>
+        <Route path="/" element={<Navigation />}>
+          <Route index element={<Home/>} />
+          <Route path='shop/*' element={<Shop />} />
+          <Route path='auth' element={<Authentication />} />
+          <Route path='checkout' element={<Checkout />} />
+        </Route>
+      </Routes>
+    </Suspense>
   );
 }
 

src/components/cart-item/cart-item.component.tsx

@@ -1,5 +1,3 @@
-
-
 import { FC, memo } from 'react';
 import { CartItemContainer, ItemDetails, Text } from './cart-item.styles';
 import { CartItem as CartItemT } from '../../store/cart/cart.slice';