Add shimmer on like dialog box

src/components/Post/DialogBoxSkeleton.jsx

@@ -0,0 +1,26 @@
+import Skeleton from "@mui/material/Skeleton";
+
+const DialogBoxSkeleton = () => {
+  return (
+    <div>
+      <SkeletonStructure />
+      <SkeletonStructure />
+      <SkeletonStructure />
+      <SkeletonStructure />
+    </div>
+  );
+};
+
+export default DialogBoxSkeleton;
+
+function SkeletonStructure() {
+  return (
+    <div className="dialog_box_skeleton">
+      <Skeleton variant="circular" width={50} height={50} />
+      <div className="dialog_box_text_skeleton">
+        <Skeleton variant="text" sx={{ fontSize: "1rem" }} />
+        <Skeleton variant="text" sx={{ fontSize: "0.5rem" }} />
+      </div>
+    </div>
+  );
+}

src/components/Post/LikesDialogBox.jsx

@@ -1,17 +1,23 @@
 import "./index.css";
-import { Box } from "@mui/material";
+
 import { useEffect, useState } from "react";
+
+import { Box } from "@mui/material";
+import DialogBoxSkeleton from "./DialogBoxSkeleton";
+import { Link } from "react-router-dom";
+import blankProfileImg from "../../assets/blank-profile.webp";
 import { db } from "../../lib/firebase";
 import { useSnackbar } from "notistack";
-import { Loader } from "../../reusableComponents";
-import { useNavigate } from "react-router-dom";
-import blankProfileImg from "../../assets/blank-profile.webp";
 
 const LikesDialogBox = ({ likecountArr }) => {
   const [userData, setUserData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const { enqueueSnackbar } = useSnackbar();
-  const navigate = useNavigate();
+
+  function trimBio(bio) {
+    const str = bio.substr(0, 90) + " ...";
+    return str;
+  }
 
   useEffect(() => {
     const fetchData = async () => {
@@ -59,33 +65,39 @@ const LikesDialogBox = ({ likecountArr }) => {
         <div className="likedby_list_container">
           {userData.map((data) => (
             <div key={data.uid} className="likedby_list_item">
-              <span>
+              <Link
+                to={`/dummygram/user/${data?.username}`}
+                style={{ color: "var(--color)" }}
+              >
                 <img
                   src={data?.photoURL ? data.photoURL : blankProfileImg}
                   alt={data?.name}
                   className="like_user_img"
-                  onClick={() => navigate(`/dummygram/user/${data?.username}`)}
                 />
-              </span>
+              </Link>
               <span>
                 <section className="like_user_data">
-                  <h3
-                    className="like_user_name"
-                    onClick={() =>
-                      navigate(`/dummygram/user/${data?.username}`)
-                    }
+                  <Link
+                    to={`/dummygram/user/${data?.username}`}
+                    style={{ textDecoration: "none" }}
                   >
-                    {data?.name}
-                  </h3>
+                    <h3 className="like_user_name">{data?.name}</h3>
+                  </Link>
                   <h5 className="like_user_username">@{data?.username}</h5>
                 </section>
-                <p className="like_user_bio">{data?.bio ? data.bio : "..."}</p>
+                <p className="like_user_bio">
+                  {data?.bio
+                    ? data.bio?.length > 90
+                      ? trimBio(data.bio)
+                      : data.bio
+                    : "..."}
+                </p>
               </span>
             </div>
           ))}
         </div>
       ) : (
-        <Loader />
+        <DialogBoxSkeleton />
       )}
     </Box>
   );

src/components/Post/index.css

@@ -272,6 +272,22 @@
   border-radius: 100%;
 }
 
+.dialog_box_skeleton {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.dialog_box_text_skeleton {
+  width: 80%;
+}
+
+.dialog_box_text_skeleton > * {
+  width: 100%;
+}
+
 .likedby_list_container {
   margin: 0;
   display: flex;
@@ -311,6 +327,7 @@
   cursor: pointer;
   font-weight: 600;
   color: rgb(42, 42, 135);
+  text-decoration: none;
 }
 
 .like_user_name:hover {

src/components/ProfileDialogBox/index.jsx

@@ -68,7 +68,7 @@ const ProfileDialogBox = ({ mouseOnProfileImg, userData }) => {
         </span>
       </p>
       <p className="dialog-box-bio">Posts: {posts}</p>
-      {followers && following ? (
+      {followers && following && (
         <div className="dialog-box-follow-container">
           <p>
             <span>{following}</span> Following
@@ -77,8 +77,6 @@ const ProfileDialogBox = ({ mouseOnProfileImg, userData }) => {
             <span>{followers}</span> Followers
           </p>
         </div>
-      ) : (
-        ""
       )}
     </div>
   );