Cart Loader

2 files changed, 29 insertions, 11 deletions

diff --git a/src/components/product/ProductSlider.js b/src/components/product/ProductSlider.js
index 26584d8a..84dc4258 100644
--- a/src/components/product/ProductSlider.js
+++ b/src/components/product/ProductSlider.js
@@ -6,7 +6,7 @@ import "swiper/css";
 export default function ProductSlider({ products }) {
   return (
     <>
-      <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8}>
+      <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8}>
         {products?.products?.map((product, index) => (
           <SwiperSlide key={index}>
             <ProductCard data={product} />
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index ce4e3a59..5949c1ba 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -29,13 +29,16 @@ import Image from "../../components/Image";
 import Layout from "../../components/Layout";
 import Link from "../../components/Link";
 import Alert from "../../components/Alert";
+import Spinner from "../../components/Spinner";
 
 export async function getServerSideProps(context) {
-  const previousRoute = context.req.headers.referer || '/';
+  let previousRoute = context.req.headers.referer || '/';
+  if (previousRoute.endsWith('/shop/cart')) previousRoute = '/';
   return { props: { previousRoute } };
 }
 
 export default function Cart({ previousRoute }) {
+  const [isLoadingProducts, setIsLoadingProducts] = useState(true);
   const [products, setProducts] = useState([]);
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
   const [totalTaxAmount, setTotalTaxAmount] = useState(0);
@@ -57,6 +60,7 @@ export default function Cart({ previousRoute }) {
         to_process: false
       }));
       setProducts(dataProducts);
+      setIsLoadingProducts(false);
     }
   }
 
@@ -178,7 +182,7 @@ export default function Cart({ previousRoute }) {
         </div>
 
         {/* jsx-start: Progress Bar */}
-        <div className="bg-gray_r-3 flex gap-x-2 p-4 rounded-md">
+        <div className="bg-gray_r-3 flex gap-x-2 p-4 rounded-md mb-3">
           <div className="flex gap-x-2 items-center">
             <div className="bg-yellow_r-9 leading-none p-2 rounded-full w-7 text-center text-gray_r-12 text-caption-2">1</div>
             <p className="font-medium text-gray_r-12 text-caption-2">Keranjang</p>
@@ -187,28 +191,42 @@ export default function Cart({ previousRoute }) {
             <div className="h-0.5 w-full bg-gray_r-7"></div>
           </div>
           <div className="flex gap-x-2 items-center">
-            <div className="bg-gray_r-4 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">2</div>
+            <div className="bg-gray_r-6 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">2</div>
             <p className="font-medium text-gray_r-11 text-caption-2">Pembayaran</p>
           </div>
           <div className="flex-1 flex items-center">
             <div className="h-0.5 w-full bg-gray_r-7"></div>
           </div>
           <div className="flex gap-x-2 items-center">
-            <div className="bg-gray_r-4 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">3</div>
+            <div className="bg-gray_r-6 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">3</div>
             <p className="font-medium text-gray_r-11 text-caption-2">Selesai</p>
           </div>
         </div>
         {/* [End] Progress Bar */}
 
         {/* --- Start Alert */}
-        <Alert type="warning" className="text-caption-2 mt-3 flex gap-x-3">
-          <ExclamationTriangleIcon className="w-14"/>
-          <span>
-            Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.
-          </span>
-        </Alert>
+        {!isLoadingProducts && (
+          <Alert type="warning" className="text-caption-2 flex gap-x-3 items-center">
+            <div>
+              <ExclamationTriangleIcon className="w-8"/>
+            </div>
+            <span>
+              {products.length > 0 ? (
+                <>Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami.</>
+              ) : (
+                <>Anda belum menambahkan barang apapun ke keranjang.</>
+              )} 
+            </span>
+          </Alert>
+        )}
         {/* ---- End Alert */}
 
+        {isLoadingProducts && (
+          <div className="flex justify-center items-center gap-x-3">
+            <Spinner className="w-4 h-4 text-gray_r-800 fill-gray_r-12" /> <span>Loading...</span>
+          </div>
+        )}
+
         <div className="p-4">
           {/* [Start] Product List */}
           <div className="flex flex-col gap-y-6 mb-8">