add skeletons for main page and navbar

radekm2000 · Mar 30, 2024 · 00681cc · 00681cc
1 parent cfc0204
commit 00681cc
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 50 deletions.
diff --git a/client/ecommerce/src/components/MainPageSkeleton.tsx b/client/ecommerce/src/components/MainPageSkeleton.tsx
@@ -0,0 +1,43 @@
+import { Box, Card, CardContent, CardHeader, Skeleton } from "@mui/material";
+
+export const MainPageSkeleton = () => {
+  return (
+    <Box
+      sx={{
+        height: "100%",
+        minHeight: "calc(100vh - 81px)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        maxWidth: "100%",
+        marginTop: "200px",
+        padding: "15px",
+      }}
+    >
+      <Box sx={{ maxWidth: "1260px", width: "100%", display: "flex", gap: '20px' }}>
+        {Array(4)
+          .fill(4)
+          .map((v, index) => (
+            <Box
+              key={index}
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                width: "20%",
+                gap: "10px",
+              }}
+            >
+              <Box sx={{ display: "flex", width: "100%", gap: "10px" }}>
+                <Skeleton
+                  variant="circular"
+                  sx={{ height: "32px", width: "32px" }}
+                ></Skeleton>
+                <Skeleton variant="text" sx={{ width: "70%" }}></Skeleton>
+              </Box>
+              <Skeleton variant="rounded" sx={{ height: "300px" }}></Skeleton>
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  );
+};
diff --git a/client/ecommerce/src/components/Navbar.tsx b/client/ecommerce/src/components/Navbar.tsx
@@ -33,6 +33,7 @@ import { useMarkProductNotificationAsRead } from "../hooks/useMarkProductNotific
 import PopoverPopupState from "./PopoverPopupState";
 import { useFetchUserInfo } from "../hooks/useFetchUserInfo";
 import { isAdmin } from "../utils/isAdmin";
+import { NavbarSkeleton } from "./NavbarSkeleton";
 
 export const NotAuthed = () => {
   return (
@@ -160,19 +161,17 @@ export const Navbar = () => {
   if (!user.username && !user.id) {
     return <NotAuthed />;
   }
-  if (isNotificationsLoading) {
-    return "isNotificationsLoading...";
+  if (isNotificationsLoading || isProductNotificationsLoading) {
+    return <NavbarSkeleton />;
   }
+
   if (!notificationsReceived) {
     return "Notifications not received yet";
   }
 
   if (!productNotificationsReceived) {
     return "Product notifications not received yet";
   }
-  if (isProductNotificationsLoading) {
-    return "isProductNotificationsLoading...";
-  }
 
   const handleSearchTextClick = () => {
     const params = new URLSearchParams();

diff --git a/client/ecommerce/src/components/NavbarSkeleton.tsx b/client/ecommerce/src/components/NavbarSkeleton.tsx
@@ -0,0 +1,52 @@
+import { Box, Divider, Skeleton } from "@mui/material";
+
+export const NavbarSkeleton = () => {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ height: "15vh", display: "flex", gap: "10px" }}>
+        <Skeleton
+          sx={{ height: "50px", width: "20%", marginLeft: "150px" }}
+        ></Skeleton>
+        <Skeleton sx={{ height: "50px", width: "30%" }}></Skeleton>
+        <Skeleton
+          sx={{ height: "50px", width: "10%", marginLeft: "100px" }}
+        ></Skeleton>
+        <Box
+          sx={{
+            display: "flex",
+            gap: "20px",
+            marginTop: "10px",
+            marginLeft: "50px",
+            width: "50%",
+            alignItems: "flex-start",
+          }}
+        >
+          <Skeleton
+            variant="circular"
+            sx={{ width: "32px", height: "32px" }}
+          ></Skeleton>
+          <Skeleton
+            variant="circular"
+            sx={{ width: "32px", height: "32px" }}
+          ></Skeleton>
+          <Skeleton
+            variant="circular"
+            sx={{ width: "32px", height: "32px" }}
+          ></Skeleton>
+        </Box>
+      </Box>
+      <Divider />
+      <Box sx={{ display: "flex", marginLeft: "150px", gap: "10px" }}>
+        <Skeleton
+          variant="text"
+          sx={{ width: "50px", height: "50px" }}
+        ></Skeleton>
+        <Skeleton
+          variant="text"
+          sx={{ width: "50px", height: "50px" }}
+        ></Skeleton>
+      </Box>
+      <Divider />
+    </Box>
+  );
+};
diff --git a/client/ecommerce/src/components/pages/MainPage.tsx b/client/ecommerce/src/components/pages/MainPage.tsx
@@ -5,6 +5,7 @@ import { Box, Typography } from "@mui/material";
 import { useAllProducts } from "../../hooks/useAllProducts";
 import { NotAuthed } from "../Navbar";
 import { PaginatedProducts } from "../PaginatedProducts";
+import { MainPageSkeleton } from "../MainPageSkeleton";
 
 export const MainPage = () => {
   const { user, setUser } = useUserContext();
@@ -20,11 +21,8 @@ export const MainPage = () => {
     }
   }, [isSuccess, setUser, userInfo]);
 
-  if (isUserInfoLoading) {
-    return "userInfo loading...";
-  }
-  if (isProductsDataLoading) {
-    return "products data loading...";
+  if (isUserInfoLoading || isProductsDataLoading) {
+    return <MainPageSkeleton />;
   }
   if (!products) {
     return "No products to display";

diff --git a/client/ecommerce/src/components/pages/Member.tsx b/client/ecommerce/src/components/pages/Member.tsx
@@ -14,9 +14,11 @@ export const Member = () => {
   const params = useParams();
   const [location, setLocation] = useLocation();
   const userId = params?.userId;
-  const { data: user } = useUserInfo(parseInt(userId!));
+  const { data: user, isLoading: isUserInfoLoading } = useUserInfo(
+    parseInt(userId!)
+  );
   console.log(user);
-  const { data: products } = useAllProducts();
+  const { data: products, isLoading: isUserProductsLoading } = useAllProducts();
 
   useEffect(() => {
     const params = new URLSearchParams();
@@ -26,11 +28,32 @@ export const Member = () => {
     }
   });
 
-  if (!user) {
-    return;
-  }
-  if (!userId) {
-    return;
+  if (isUserInfoLoading || isUserProductsLoading || !user || !userId) {
+    return (
+      <Box
+        sx={{
+          height: "100%",
+          minHeight: "calc(100vh - 81px)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          padding: "20px",
+          maxWidth: "100%",
+        }}
+      >
+        <UserProfileSkeleton />
+        <Box
+          sx={{
+            maxWidth: "1260px",
+            width: "100%",
+            display: "column",
+            padding: "20x",
+          }}
+        >
+          <MemberProductsSkeleton />
+        </Box>
+      </Box>
+    );
   }
 
   const memberProducts = products?.filter(
@@ -67,39 +90,21 @@ export const Member = () => {
         maxWidth: "100%",
       }}
     >
-      {!user.username && products === undefined ? (
-        <>
-          <UserProfileSkeleton />
-          <Box
-            sx={{
-              maxWidth: "1260px",
-              width: "100%",
-              display: "column",
-              padding: "20x",
-            }}
-          >
-            <MemberProductsSkeleton />
-          </Box>
-        </>
-      ) : (
-        <>
-          <ProfileInfo user={user} />
-          <Box
-            sx={{
-              maxWidth: "1260px",
-              width: "100%",
-              display: "column",
-              padding: "20x",
-            }}
-          >
-            <BasicTabs
-              reviews={timeFormattedReviews}
-              setTab={setTab}
-              memberproducts={memberProducts}
-            />
-          </Box>
-        </>
-      )}
+      <ProfileInfo user={user} />
+      <Box
+        sx={{
+          maxWidth: "1260px",
+          width: "100%",
+          display: "column",
+          padding: "20x",
+        }}
+      >
+        <BasicTabs
+          reviews={timeFormattedReviews}
+          setTab={setTab}
+          memberproducts={memberProducts}
+        />
+      </Box>
     </Box>
   );
 };