products page updated for loading

components/productSection/ProductsGrid.tsx

@@ -61,11 +61,14 @@ export function ProductsGrid() {
             <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
           </motion.div>
 
-          {loading && <div className="w-full flex items-center justify-center">
+          {loading && (
-            <Loading /></div>}
+            <div className="w-full flex items-center justify-center">
+              <Loading />
+            </div>
+          )}
 
           {/* Product Grid */}
-          { loading|| allProducts && allProducts.length > 0 ? (
+          {loading || (allProducts && allProducts.length > 0) ? (
             <motion.div
               initial="hidden"
               whileInView="visible"
@@ -74,9 +77,7 @@ export function ProductsGrid() {
             >
               {allProducts.map((product: any) => (
                 <motion.div key={product.id}>
-                  <ProductCard
+                  <ProductCard product={product} />
-                    product={product}
-                  />
                 </motion.div>
               ))}
             </motion.div>

components/productsPage/products.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { useEffect, useState } from "react";
 import EmptyState from "./emptyData";
-import { ProductModal } from "../productSection/ProductModal";
 import { motion } from "framer-motion";
 import { ProductCard } from "../productSection/ProductCard";
 import axios from "axios";
+import Loading from "../loading";
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -12,49 +12,42 @@ const itemVariants = {
 };
 
 export default function Products() {
-  const [allProducts, setAllProducts] = useState<any>(null);
+  const [allProducts, setAllProducts] = useState<any>([]);
-  const [selectedProduct, setSelectedProduct] = useState<any>(null);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     async function getData() {
-      await axios.get("https://admin.promtechno.uz/api/products/").then((res) => {
+      setLoading(true);
-        console.log("all data: ", res?.data);
+      await axios
-        const allData = res?.data || [];
+        .get("https://admin.promtechno.uz/api/products/")
-        setAllProducts(allData);
+        .then((res) => {
-      });
+          console.log("all data: ", res?.data);
+          const allData = res?.data || [];
+          setAllProducts(allData);
+          setLoading(false);
+        });
     }
     getData();
   }, []);
 
-  const handleViewDetails = (id: number) => {
-    const product = allProducts.find((p: any) => p.id === id);
-    if (product) {
-      setSelectedProduct(product);
-    }
-  };
   return (
     <div className="py-20 max-w-[1200px] w-full mx-auto px-2 ">
-      {allProducts && allProducts.length > 0 ? (
+      {loading && (
+        <div className="w-full flex items-center justify-center">
+          <Loading />
+        </div>
+      )}
+      {loading || (allProducts && allProducts.length > 0) ? (
         <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
           {allProducts.map((product: any) => (
             <motion.div key={product.id} variants={itemVariants}>
-              <ProductCard
+              <ProductCard product={product} />
-                product={product}
-                onViewDetails={handleViewDetails}
-              />
             </motion.div>
           ))}
         </div>
       ) : (
         <EmptyState page="products" />
       )}
-      {/* Product Modal */}
-      {selectedProduct && (
-        <ProductModal
-          product={selectedProduct}
-          onClose={() => setSelectedProduct(null)}
-        />
-      )}
     </div>
   );
 }