Improvements

- Image lazy loading - Loading properly added on category pages - Scroll position reset to top on "page" change - Smooth CSS animation on "page" change
fleps · Apr 6, 2024 · b3cb774 · b3cb774
1 parent d8a0924
commit b3cb774
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 42 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,5 @@
-import { useEffect, lazy, Suspense } from 'react';
-import { Routes, Route } from "react-router-dom";
+import { useEffect, lazy, Suspense, useLayoutEffect } from 'react';
+import { Routes, Route, useLocation } from "react-router-dom";
 import { useDispatch } from 'react-redux';
 
 import { authChangedListener, createUserDocFromAuth } from './utils/firebase/firebase.utils.js';
@@ -13,7 +13,7 @@ const Shop = lazy(() => import('./routes/shop/shop.component'));
 const CheckoutComponent = lazy(() => import('./routes/checkout/checkout.component'));
 
 const App = () => {
-
+  const location = useLocation();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -27,6 +27,10 @@ const App = () => {
     return unsubscribe;
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useLayoutEffect(() => {
+    window.scrollTo({ top:0, left:0, behavior: "instant" });
+  }, [location.pathname]);
+
   return (
     <Suspense fallback={<SpinnerComponent />}>
 

diff --git a/src/components/cart/cart-item.component.jsx b/src/components/cart/cart-item.component.jsx
@@ -7,7 +7,7 @@ const CartItem = memo(({ cartItem }) => {
   const { name, imageUrl, price, quantity } = cartItem;
   return (
     <div className='minicart-item'>
-      <img src={imageUrl} alt={`${name} image`} />
+      <img src={imageUrl} alt={`${name} image`} loading='lazy' />
       <div className='item-details'>
         <h3 className='name'>{name}</h3>
         <span className='info'>

diff --git a/src/components/cart/minicart.styles.scss b/src/components/cart/minicart.styles.scss
@@ -3,7 +3,7 @@
   width: 280px;
   height: auto;
   padding: 20px;
-  border: 1px solid black;
+  border: 1px solid #ececec;
   background-color: white;
   top: 60px;
   right: 22px;

diff --git a/src/components/product-card/product-card.component.jsx b/src/components/product-card/product-card.component.jsx
@@ -1,10 +1,11 @@
+import { memo } from 'react';
 import { useDispatch } from 'react-redux';
 import { addItemToCart, toggleMinicart } from '../../store/minicart.reducer';
 
 import Button from '../button/button.component';
 import './product-card.styles.scss';
 
-const ProductCard = ({ product }) => {
+const ProductCard = memo(({ product }) => {
   const { name, imageUrl, price } = product;
   const dispatch = useDispatch();
 
@@ -16,7 +17,7 @@ const ProductCard = ({ product }) => {
   return (
     <div className='product-card-container'>
       <div className='img-container'>
-        <img src={imageUrl} alt={name} />
+        <img src={imageUrl} alt={name} loading='lazy' />
         <Button type='button' style='' label='Add to cart' onClick={addProductToCart} />
       </div>
       <div className='product-footer'>
@@ -25,6 +26,6 @@ const ProductCard = ({ product }) => {
       </div>
     </div>
   );
-}
+})
 
 export default ProductCard;
diff --git a/src/components/spinner/spinner.styles.scss b/src/components/spinner/spinner.styles.scss
@@ -1,5 +1,5 @@
 .spinner-overlay {
-  height: 60vh;
+  height: 100vh;
   width: 100%;
   display: flex;
   justify-content: center;

diff --git a/src/index.scss b/src/index.scss
@@ -33,6 +33,8 @@ body {
   margin-right: auto;
   padding: 0 20px 25px;
   width: 100%;
+  opacity: 0;
+  animation: 0.40s ease-out forwards fade-in;
 
   @media only screen and (min-width: 768px ) {
     padding: 0 20px 50px;
@@ -43,6 +45,15 @@ body {
   }
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 100;
+  }
+}
+
 a {
   text-decoration: none;
   color: #000;

diff --git a/src/routes/category-list-page/category-list-page.component.jsx b/src/routes/category-list-page/category-list-page.component.jsx
@@ -11,32 +11,35 @@ const CategoryListPage = () => {
   const isLoading = useSelector(selectCategoriesIsLoading);
 
   return (
-    <div className='container page-container'>
-      {isLoading ? (
-        <SpinnerComponent />
+    <>
+      {
+        isLoading ? (
+          <SpinnerComponent />
         ) : (
-          Object.keys(categoriesMap).map(title => {
-            return (
-              <div className='cat-wrapper' key={title}>
-                <h2 className='cat-name'>
-                  {title}
-                  <Link className='see-link' to={title}>
-                    See all {categoriesMap[title].length} products »
-                  </Link>
-                </h2>
-                <div className='shop-container'>
-                  {categoriesMap[title].slice(0, 4).map((product) => {
-                      return (
-                        <ProductCard key={product.id} product={product} />
-                      )
-                  })}
+          <div className='container page-container'>
+            { Object.keys(categoriesMap).map(title => {
+              return (
+                <div className='cat-wrapper' key={title}>
+                  <h2 className='cat-name'>
+                    {title}
+                    <Link className='see-link' to={title}>
+                      See all {categoriesMap[title].length} products »
+                    </Link>
+                  </h2>
+                  <div className='shop-container'>
+                    {categoriesMap[title].slice(0, 4).map((product) => {
+                        return (
+                          <ProductCard key={product.id} product={product} />
+                        )
+                    })}
+                  </div>
                 </div>
-              </div>
-            )
-          })
+              )
+            }) }
+          </div>
         )
       }
-    </div>
+    </>
   );
 }
 

diff --git a/src/routes/category/category.component.jsx b/src/routes/category/category.component.jsx
@@ -17,12 +17,12 @@ const Category = () => {
   }, [category, categoriesMap]);
 
   return (
-    <div className='container page-container'>
+    <>
       {
         isLoading ? (
           <SpinnerComponent />
         ) : (
-          <>
+          <div className='container page-container'>
             <h2 className='cat-page-name'>
               {category}
               <span className='product-count'>
@@ -36,10 +36,10 @@ const Category = () => {
                   )
               })}
             </div>
-          </>
+          </div>
         )
       }
-    </div>
+    </>
   );
 }
 

diff --git a/src/routes/checkout/checkout.component.jsx b/src/routes/checkout/checkout.component.jsx
@@ -1,6 +1,5 @@
-import { useLayoutEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { addItemToCart, removeOrDecreaseItem } from '../../store/minicart.reducer';
 import { selectBagTotalPrice, selectCartItems } from '../../store/minicart.selector';
@@ -11,15 +10,10 @@ const CheckoutComponent = () => {
   const dispatch = useDispatch();
   const cartItems = useSelector(selectCartItems);
   const bagTotalPrice = useSelector(selectBagTotalPrice);
-  const location = useLocation();
 
   const handleAddToCart = (product) => dispatch(addItemToCart(product));
   const handleRemoveOrDecrease = (product, directRemove = false) => dispatch(removeOrDecreaseItem({ product, directRemove }));
 
-  useLayoutEffect(() => {
-    window.scrollTo({ top:0, left:0, behavior: "instant" });
-  }, [location.pathname]);
-
   return (
     <div className={`container checkout-container ${!cartItems.length && 'empty-container'}`}>
       <h1>Checkout</h1>