From f98b0c7cb099c690aaf9ae5a3a92816f205f8639 Mon Sep 17 00:00:00 2001
From: thanwin84 <thanwinhline84@gmail.com>
Date: Fri, 14 Feb 2025 03:21:54 +0600
Subject: [PATCH] Add Loading component

---
 .../thanwin/ecommerce/Ecommerce.jsx           | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/thanwin/ecommerce/Ecommerce.jsx b/src/components/thanwin/ecommerce/Ecommerce.jsx
index c0bbc83..1392799 100644
--- a/src/components/thanwin/ecommerce/Ecommerce.jsx
+++ b/src/components/thanwin/ecommerce/Ecommerce.jsx
@@ -1,29 +1,42 @@
 import ProductList from './ProductList';
 import FilterContainer from './FilterContainer';
-
 import CartIcon from './CartIcon';
-
-import { EcommerceProvider } from './ecommerContext';
+import Spinner from './Spinner';
+import { EcommerceProvider, useEcommerceContext } from './ecommerContext';
 import Cart from './Cart';
 
 const Ecommerce = () => {
   return (
     <EcommerceProvider>
-      <section className="w-full px-6 py-4 bg-gray-100 relative">
-        <div className="flex justify-between items-center">
-          <h1 className="flex-1 text-xl tracking-widest font-bold  text-slate-900 text-center my-6">
-            Win Store
-          </h1>
-          <CartIcon />
-        </div>
-        <div>
-          <FilterContainer />
-          <ProductList />
-        </div>
-        <Cart />
-      </section>
+      <Content />
     </EcommerceProvider>
   );
 };
 
+const Content = () => {
+  const { isLoading } = useEcommerceContext();
+  if (isLoading) {
+    return (
+      <div className="bg-gray-100 py-6 h-screen">
+        <Spinner />
+      </div>
+    );
+  }
+  return (
+    <section className="w-full px-6 py-4 bg-gray-100 relative">
+      <div className="flex justify-between items-center">
+        <h1 className="flex-1 text-xl tracking-widest font-bold  text-slate-900 text-center my-6">
+          Win Store
+        </h1>
+        <CartIcon />
+      </div>
+      <div>
+        <FilterContainer />
+        <ProductList />
+      </div>
+      <Cart />
+    </section>
+  );
+};
+
 export default Ecommerce;