add catalog skeleton

client/ecommerce/src/components/CatalogSkeleton.tsx

@@ -0,0 +1,30 @@
+import { Box, Container, Divider, Skeleton } from "@mui/material";
+
+export const CatalogSkeleton = () => {
+  return (
+    <Container>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+        <Skeleton
+          variant="text"
+          sx={{ width: "10%", height: "20px" }}
+        ></Skeleton>
+        <Skeleton
+          variant="text"
+          sx={{ width: "15%", height: "20px" }}
+        ></Skeleton>
+        <Divider />
+        <Box sx={{ display: "flex", gap: "20px" }}>
+          <Skeleton
+            variant="rectangular"
+            sx={{ width: "70px", height: "20px" }}
+          ></Skeleton>
+          <Skeleton
+            variant="rectangular"
+            sx={{ width: "70px", height: "20px" }}
+          ></Skeleton>
+        </Box>
+        <Divider />
+      </Box>
+    </Container>
+  );
+};

client/ecommerce/src/components/pages/MenCatalog.tsx

@@ -19,6 +19,7 @@ import { BrandButton } from "../filter-buttons/BrandButton";
 import { SortByPriceButton } from "../filter-buttons/SortByPriceButton";
 import { useFilteredProducts } from "../../hooks/useFilteredProducts";
 import { AccountCircle } from "@mui/icons-material";
+import { CatalogSkeleton } from "../CatalogSkeleton";
 
 export const MenCatalog = () => {
   const below1200 = useMediaQuery(1200);
@@ -53,7 +54,7 @@ export const MenCatalog = () => {
   );
 
   if (isProductsLoading) {
-    return "isLoading...";
+    return <CatalogSkeleton />;
   }
   if (!products) {
     return;

client/ecommerce/src/components/pages/WomenCatalog.tsx

@@ -19,6 +19,7 @@ import { BrandButton } from "../filter-buttons/BrandButton";
 import { SortByPriceButton } from "../filter-buttons/SortByPriceButton";
 import { useFilteredProducts } from "../../hooks/useFilteredProducts";
 import { AccountCircle } from "@mui/icons-material";
+import { CatalogSkeleton } from "../CatalogSkeleton";
 
 export const WomenCatalog = () => {
   const below1200 = useMediaQuery(1200);
@@ -30,11 +31,6 @@ export const WomenCatalog = () => {
   const [order, setOrder] = useState("");
   const { user } = useUserContext();
   const [category] = useState<string>("Women");
-  console.log("chosen brand");
-  console.log(brand);
-
-  console.log(user);
-  console.log(order);
   useEffect(() => {
     const params = new URLSearchParams();
     if (brand && order) {
@@ -57,7 +53,7 @@ export const WomenCatalog = () => {
   );
 
   if (isProductsLoading) {
-    return "isLoading...";
+    return <CatalogSkeleton />;
   }
   if (!products) {
     return;