added skeleton to image loading in post

Author: aadityarajkumawat

client/package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.13",
     "@chakra-ui/react": "^1.3.4",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",

client/package.json

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
-import styled, { keyframes } from "styled-components";
 import { connect } from "react-redux";
+import styled, { keyframes } from "styled-components";
 import { deletePost, getUserPosts } from "../../actions/getPostAction";
 
 const OptionsMenu = ({

client/src/components/layout components/OptionsMenu.js

@@ -31,6 +31,7 @@ const Post = ({
   const [post, setPost] = useState({});
   const toast = useToast();
   const [isLargerThan500] = useMediaQuery("(min-width: 500px)");
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   useEffect(() => {
     showNav();
@@ -99,8 +100,6 @@ const Post = ({
     history.push(`/dashboard/home/${openedPost.name}/${openedPost.user}`);
   };
 
-  console.log(openedPost);
-
   return (
     <React.Fragment>
       <S.Flex
@@ -155,13 +154,18 @@ const Post = ({
           )}
         </S.Flex>
         <S.Flex mt="0.5rem">
+          {!imageLoaded && <Skeleton h="600px" w="100%"></Skeleton>}
           <S.Image
             src={post && `${post.image}`}
             fallbackSrc="https://i.ibb.co/RBT25fY/default-fallback-image.png"
             alt="post"
             style={{
               width: isLargerThan500 ? "100%" : "300px",
               height: isLargerThan500 ? "600px" : "auto",
+              display: imageLoaded ? "" : "none",
+            }}
+            onLoad={() => {
+              setImageLoaded(true);
             }}
           />
         </S.Flex>

client/src/components/layout components/Post/Post.js

@@ -1,30 +1,38 @@
-import { Box, Flex, Image, Text } from "@chakra-ui/react";
+import {
+  Flex,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from "@chakra-ui/react";
 import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { getAdminPrivilages } from "../../../../actions/adminPrivilagesAction";
 import {
+  deletePost,
   getSavedPosts,
   savePost,
   setCurrentPost,
 } from "../../../../actions/getPostAction";
-import OptionsMenu from "../../OptionsMenu";
 import PostPlaceHolder from "../../PostPlaceHolder";
 
 const TrendingItem = ({
+  deletePost,
   post,
   setCurrentPost,
   trending: { loading },
   routing,
   by,
-  postRedu: { loadingUserPosts, savedPosts, status, savedToast },
+  postRedu: { loadingUserPosts, savedPosts, status },
   getAdminPrivilages,
   adminPrivilages,
   savePost,
   auth,
   getSavedPosts,
 }) => {
   const [loadingUNI, setLoadingUNI] = useState(true);
-  const [openOptions, setOpenOptions] = useState(false);
   const [styleForHeading, setStyleForHeading] = useState({});
 
   useEffect(() => {
@@ -86,14 +94,6 @@ const TrendingItem = ({
     // eslint-disable-next-line
   }, [loadingUNI, loadingUserPosts, loading]);
 
-  const openOptionsMenu = () => {
-    setOpenOptions((prev) => !prev);
-  };
-
-  const _exitOptionMode_ = () => {
-    setOpenOptions((prev) => !prev);
-  };
-
   return (
     <Flex
       flexDirection="column"
@@ -102,7 +102,7 @@ const TrendingItem = ({
       rounded="md"
       border="2px solid #a6a6a690"
       w="100%"
-      maxWidth="300px"
+      maxWidth="350px"
     >
       <Flex onClick={post !== undefined ? openPost : null}>
         <Image
@@ -145,30 +145,33 @@ const TrendingItem = ({
               <Text>7 min</Text>
             </Flex>
           </Flex>
-          <Box>
+          <Flex flexDir="column" alignItems="center" alignSelf="center">
             <i
               onClick={saveThisPost}
               className={`fa${checkSavedStatus() ? "s" : "r"} fa-bookmark`}
             ></i>
             {adminPrivilages.postAccessibility && (
               <Fragment>
-                <Box onClick={openOptionsMenu} style={{ position: "relative" }}>
-                  <i className={`fas fa-ellipsis-v options--post`}></i>
-                  <OptionsMenu
-                    displayStatus={openOptions}
-                    postID={post._id}
-                    userID={post.user}
-                  />
-                </Box>
-                <Box
-                  onClick={_exitOptionMode_}
-                  style={{
-                    display: openOptions ? "block" : "none",
-                  }}
-                ></Box>
+                <Flex mt="10px">
+                  <Menu>
+                    <MenuButton
+                      as={Flex}
+                      w="15px"
+                      h="20px"
+                      justifyContent="center"
+                      alignItems="center"
+                      _hover={{ bg: "#ffffff80" }}
+                    ></MenuButton>
+                    <MenuList>
+                      <MenuItem onClick={() => deletePost(post._id)}>
+                        Delete
+                      </MenuItem>
+                    </MenuList>
+                  </Menu>
+                </Flex>
               </Fragment>
             )}
-          </Box>
+          </Flex>
         </Flex>
       )}
     </Flex>
@@ -189,4 +192,5 @@ export default connect(mapStateToProps, {
   getAdminPrivilages,
   savePost,
   getSavedPosts,
+  deletePost,
 })(TrendingItem);