chore: skeleton added

SySagar · Mar 31, 2024 · c67e7a0 · c67e7a0
1 parent dc3e164
commit c67e7a0
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 132 deletions.
diff --git a/src/app/blog/components/TagInput.tsx b/src/app/blog/components/TagInput.tsx
@@ -15,7 +15,10 @@ const TagInput: React.FC = () => {
   const [tagInput, setTagInput] = useState<string>("");
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
-  const [blog, setBlog] = useEditorContent((state: any) => [ state.blog as BlogTagTypes,state.setBlog,]);
+  const [blog, setBlog] = useEditorContent((state: any) => [
+    state.blog as BlogTagTypes,
+    state.setBlog,
+  ]);
   // const onTagsChnage = (e: React.ChangeEvent<HTMLInputElement>) => {
 
   // }
@@ -24,7 +27,6 @@ const TagInput: React.FC = () => {
     setTagInput(event.target.value);
   };
 
-  console.log("tags", tags);
   const handleAddTag = () => {
     if (tagInput.trim() !== "" && !tags.includes(tagInput)) {
       setTags([...tags, tagInput]);
@@ -34,9 +36,8 @@ const TagInput: React.FC = () => {
 
   const handleAutocompleteChange = (
     event: React.SyntheticEvent,
-    value: string | null
+    value: string | null,
   ) => {
-    console.log("value", event);
     if (value) {
       setTags([...tags, value]);
     }

diff --git a/src/app/home/HeroPage.tsx b/src/app/home/HeroPage.tsx
@@ -93,7 +93,7 @@ export default function HeroPage() {
           <Stack
             className="daily-blogs"
             padding={2}
-            paddingTop={isTablet ? "40px" : "0"}
+            paddingTop={isTablet ? "40px" : "60px"}
             maxWidth={isTablet ? "90%" : "80vw"}
             gap={4}
             flexWrap={"wrap"}

diff --git a/src/app/home/components/Blog.tsx b/src/app/home/components/Blog.tsx
@@ -49,8 +49,8 @@ export default function Blog({
         <img
           style={{
             objectFit: "cover",
-            width: "100%",
-            height: "100%",
+            width: "300px",
+            height: "200px",
             borderRadius: "4px",
           }}
           src={image}

diff --git a/src/app/user/AboutUser.tsx b/src/app/user/AboutUser.tsx
@@ -6,9 +6,10 @@ import { useEffect } from "react";
 import { useState } from "react";
 import { userTypes, userBlogTypes } from "./types/userTypes";
 import useLoadingStore from "../../lib/store/useLoading";
-import CircularProgress from "@mui/material/CircularProgress";
 import APIMethods from "../../lib/axios/api";
 import { useLocation } from "react-router-dom";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import Loaders from "./components/Loaders";
 
 interface LocationState {
   authorId: string;
@@ -83,10 +84,7 @@ export default function AboutUser() {
       });
   }, []);
 
-  useEffect(() => {
-    if (!profile && !blogs) return;
-    else setIsLoading(false);
-  }, [profile, blogs]);
+  console.log("isloading", isLoading);
 
   return (
     <Stack
@@ -95,6 +93,26 @@ export default function AboutUser() {
       alignItems={"end"}
       gap={5}
     >
+      <Stack position={"absolute"} top={20} right={20} zIndex={5}>
+        <Button
+          variant="contained"
+          onClick={() => {
+            window.location.href = "/";
+          }}
+          sx={{
+            background: "#474747",
+            color: "#fff",
+            borderRadius: "8px",
+            padding: "5px 10px",
+            fontSize: "14px",
+            textTransform: "none",
+            gap: "5px",
+          }}
+        >
+          <KeyboardBackspaceIcon sx={{ fontSize: "20px" }} />
+          Back to home
+        </Button>
+      </Stack>
       <Stack
         className="user-card-profile"
         paddingBottom={5}
@@ -109,7 +127,7 @@ export default function AboutUser() {
         left={50}
         sx={{
           background: "#fff",
-          boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.7)",
+          boxShadow: "0px 0px 3px rgba(0, 0, 0, 0.7)",
         }}
       >
         <Stack
@@ -267,145 +285,144 @@ export default function AboutUser() {
           </Stack>
         </Stack>
       </Stack>
-      {isLoading ? (
-        <Stack>
-          <CircularProgress />
-        </Stack>
-      ) : (
+
+      <Stack
+        height={"130vh"}
+        justifyContent={"start"}
+        alignItems={"end"}
+        gap={5}
+        position={"relative"}
+      >
         <Stack
-          height={"130vh"}
-          justifyContent={"start"}
-          alignItems={"end"}
-          gap={5}
+          className="data"
+          maxWidth={"100%"}
+          sx={{
+            background: "#fff",
+          }}
           position={"relative"}
         >
           <Stack
-            className="data"
-            maxWidth={"100%"}
-            sx={{
-              background: "#fff",
-            }}
-            position={"relative"}
+            className="background-image"
+            maxHeight={"260px"}
+            justifyContent={"center"}
+            alignItems={"center"}
+            overflow={"hidden"}
           >
-            <Stack
-              className="background-image"
-              maxHeight={"260px"}
-              justifyContent={"center"}
-              alignItems={"center"}
-              overflow={"hidden"}
-            >
-              <img
-                src="https://images.unsplash.com/photo-1604871000636-074fa5117945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"
-                alt=""
-                style={{
-                  objectFit: "cover",
-                  borderRadius: 18,
-                }}
-              />
-            </Stack>
+            <img
+              src="https://images.unsplash.com/photo-1604871000636-074fa5117945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"
+              alt=""
+              style={{
+                objectFit: "cover",
+                borderRadius: 18,
+              }}
+            />
           </Stack>
-
-          <Stack
-            className="blogs"
-            width={"1000px"}
-            height={"500px"}
-            marginRight={"3rem"}
-            overflow={"scroll"}
-          >
-            {/* <Typography variant="h4">
-              Blogs
-          </Typography> */}
-            {blogs.length == 0 && (
-              <Stack width={"100%"} alignItems={"center"}>
-                <Typography variant="h4">No Blogs Yet</Typography>
-              </Stack>
-            )}
-            {blogs.map((blog, idx) => {
-              return (
-                <Stack
-                  key={idx}
-                  className="single-blog-container"
-                  borderRadius={2}
-                  color={"#474747"}
-                  width={"100%"}
-                  onClick={() => {
-                    window.location.href = `/${blog._id}`;
-                  }}
-                >
+        </Stack>
+        <Stack
+          className="blogs"
+          width={"1000px"}
+          height={"500px"}
+          marginRight={"3rem"}
+          overflow={"scroll"}
+        >
+          {isLoading == false && blogs.length == 0 && (
+            <Stack width={"100%"} alignItems={"center"}>
+              <Typography variant="h4">No Blogs Yet</Typography>
+            </Stack>
+          )}
+          {isLoading ? (
+            <Stack>
+              <Loaders />
+            </Stack>
+          ) : (
+            <>
+              {blogs.map((blog, idx) => {
+                return (
                   <Stack
-                    className="single-blog"
-                    padding={3}
-                    height={"4rem"}
-                    direction={"row"}
-                    alignItems={"center"}
-                    gap={5}
-                    position={"relative"}
+                    key={idx}
+                    className="single-blog-container"
+                    borderRadius={2}
+                    color={"#474747"}
+                    width={"100%"}
+                    onClick={() => {
+                      window.location.href = `/${blog._id}`;
+                    }}
                   >
                     <Stack
-                      sx={{ borderColor: "white", objectFit: "cover" }}
-                      overflow={"hidden"}
-                      maxHeight={"300px"}
-                      width={"9rem"}
-                      height={"100%"}
-                      minHeight={"90px"}
-                    >
-                      <img
-                        style={{
-                          objectFit: "cover",
-                          width: "100%",
-                          minHeight: "100%",
-                        }}
-                        src={blog.coverImageURL}
-                        alt=""
-                      />
-                    </Stack>
-
-                    <Stack justifyContent={"center"} flexGrow={1}>
-                      <Typography variant="h5">{blog.title}</Typography>
-                    </Stack>
-
-                    <Stack
+                      className="single-blog"
+                      padding={3}
+                      height={"4rem"}
                       direction={"row"}
                       alignItems={"center"}
-                      gap={3}
-                      className="likes&comment"
-                      position={"absolute"}
-                      right={40}
+                      gap={5}
+                      position={"relative"}
                     >
-                      <Stack direction={"row"} alignItems={"center"} gap={1}>
-                        <Typography variant="h6">
-                          {(blog.likes as []).length}
-                        </Typography>
+                      <Stack
+                        sx={{ borderColor: "white", objectFit: "cover" }}
+                        overflow={"hidden"}
+                        maxHeight={"300px"}
+                        width={"9rem"}
+                        height={"100%"}
+                        minHeight={"90px"}
+                      >
                         <img
-                          src="/png/unclapped.png"
+                          style={{
+                            objectFit: "cover",
+                            width: "100%",
+                            minHeight: "100%",
+                          }}
+                          src={blog.coverImageURL}
                           alt=""
-                          style={{ width: "20px", height: "20px" }}
                         />
                       </Stack>
-                      <Stack direction={"row"} alignItems={"center"} gap={1}>
-                        <Typography variant="h6">
-                          {(blog.comments as []).length}
-                        </Typography>
-                        <img
-                          src="/png/comment.png"
-                          alt=""
-                          style={{ width: "20px", height: "20px" }}
-                        />
+
+                      <Stack justifyContent={"center"} flexGrow={1}>
+                        <Typography variant="h5">{blog.title}</Typography>
+                      </Stack>
+
+                      <Stack
+                        direction={"row"}
+                        alignItems={"center"}
+                        gap={3}
+                        className="likes&comment"
+                        position={"absolute"}
+                        right={40}
+                      >
+                        <Stack direction={"row"} alignItems={"center"} gap={1}>
+                          <Typography variant="h6">
+                            {(blog.likes as []).length}
+                          </Typography>
+                          <img
+                            src="/png/unclapped.png"
+                            alt=""
+                            style={{ width: "20px", height: "20px" }}
+                          />
+                        </Stack>
+                        <Stack direction={"row"} alignItems={"center"} gap={1}>
+                          <Typography variant="h6">
+                            {(blog.comments as []).length}
+                          </Typography>
+                          <img
+                            src="/png/comment.png"
+                            alt=""
+                            style={{ width: "20px", height: "20px" }}
+                          />
+                        </Stack>
                       </Stack>
-                    </Stack>
 
-                    <Stack position={"absolute"} top={3} right={40}>
-                      <Typography variant="body2">{blog.date}</Typography>
+                      <Stack position={"absolute"} top={3} right={40}>
+                        <Typography variant="body2">{blog.date}</Typography>
+                      </Stack>
                     </Stack>
-                  </Stack>
 
-                  <Divider />
-                </Stack>
-              );
-            })}
-          </Stack>
+                    <Divider />
+                  </Stack>
+                );
+              })}
+            </>
+          )}
         </Stack>
-      )}
+      </Stack>
     </Stack>
   );
 }
diff --git a/src/app/user/components/Loaders.tsx b/src/app/user/components/Loaders.tsx
@@ -0,0 +1,14 @@
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+
+export default function Loaders() {
+  return (
+    <Stack spacing={3}>
+      <Skeleton variant="rounded" width={"100%"} height={100} />
+      <Skeleton variant="rounded" width={"100%"} height={100} />
+      <Skeleton variant="rounded" width={"100%"} height={100} />
+      <Skeleton variant="rounded" width={"100%"} height={100} />
+      <Skeleton variant="rounded" width={"100%"} height={100} />
+    </Stack>
+  );
+}