fix: display skeleton correctly

2 files changed, 15 insertions, 15 deletions

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index db467a1..e4ef66a 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -16,7 +16,7 @@ interface PropTypes {
   totalVotes: number;
   userInfo: User | undefined;
   setUserInfo: (userInfo: User) => void;
-  loading: boolean;
+  isLoading: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -83,7 +83,7 @@ const useStyles = makeStyles(theme => ({
 
 
 const ProfileInfo: React.FC<PropTypes> = ({
-  savedPolls, totalVotes, setUserInfo, userInfo, loading
+  savedPolls, totalVotes, setUserInfo, userInfo, isLoading
 }) => {
   const classes = useStyles();
   const [input, setInput] = useState(false);
@@ -105,7 +105,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        loading
+        isLoading
           ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
           : userInfo?._id === localStorage.getItem('userId')
             ? (
@@ -133,7 +133,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
             : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
       }
       {
-        loading
+        isLoading
           ? <Skeleton animation="wave" variant="rect" width={100} height={20} className={classes.skeleton} />
           : (
             <Typography variant="h5" className={classes.name}>
@@ -144,19 +144,19 @@ const ProfileInfo: React.FC<PropTypes> = ({
       }
       <div className={classes.profileMenu}>
         {
-          !loading
+          isLoading
             ? (
               <>
-                <Highlight text="Polls" value={savedPolls} />
-                <Highlight text="Since" value={dateSince} />
-                <Highlight text="Total votes" value={totalVotes} />
+                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
+                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
+                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
               </>
             )
             : (
               <>
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
+                <Highlight text="Polls" value={savedPolls} />
+                <Highlight text="Since" value={dateSince} />
+                <Highlight text="Total votes" value={totalVotes} />
               </>
             )
         }
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index ba4db7d..3beeb00 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -15,14 +15,15 @@ const ProfilePage: React.FC = () => {
   const [totalVotes, setTotalVotes] = useState<number>(0);
   const { page, navigate } = useNavigate();
   const { user } = useAuth();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isInfoLoading, setIsInfoLoading] = useState(false);
 
   useEffect(() => {
     const id = page?.id || user?._id;
-    setIsLoading(true);
+    setIsInfoLoading(true);
     if (id) {
       get(`/users/${id}`).then(response => {
         setUserInfo(response.data);
+        setIsInfoLoading(false);
       });
       get(`/profiles/${id}`).then(response => {
         setPolls([]);
@@ -33,7 +34,6 @@ const ProfilePage: React.FC = () => {
             return total + left.votes + right.votes;
           }, 0
         ));
-        setIsLoading(false);
       });
     } else navigate('auth');
   }, [navigate, page, user]);
@@ -45,7 +45,7 @@ const ProfilePage: React.FC = () => {
         setUserInfo={setUserInfo}
         savedPolls={polls.length}
         totalVotes={totalVotes}
-        loading={isLoading}
+        isLoading={isInfoLoading}
       />
       <Feed polls={[...polls]} />
     </Container>