feat: add skeleton to avatar page

4 files changed, 89 insertions, 34 deletions

diff --git a/package-lock.json b/package-lock.json
index e7f7059..3329f6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1374,6 +1374,30 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.10.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      },
+      "dependencies": {
+        "@material-ui/utils": {
+          "version": "4.10.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+          "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0"
+          }
+        }
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
diff --git a/package.json b/package.json
index f75c0e8..61cc8f3 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "axios": "^0.19.2",
     "lodash": "^4.17.15",
     "react": "^16.13.1",
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 9557a5e..db467a1 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -4,18 +4,19 @@ import { makeStyles } from '@material-ui/core/styles';
 import { User } from 'which-types';
 import CameraAltIcon from '@material-ui/icons/CameraAlt';
 import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
+import Skeleton from '@material-ui/lab/Skeleton';
 import MoreMenu from './MoreMenu';
 import Highlight from './Highlight';
 import UploadImage from '../../components/UploadImage/UploadImage';
 import { patch } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
 
-
 interface PropTypes {
   savedPolls: number;
   totalVotes: number;
   userInfo: User | undefined;
   setUserInfo: (userInfo: User) => void;
+  loading: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -72,18 +73,21 @@ const useStyles = makeStyles(theme => ({
   },
   menuText: {
     color: 'darkgray'
+  },
+  skeleton: {
+    margin: '10px auto',
+    borderRadius: 2
   }
+
 }));
 
 
 const ProfileInfo: React.FC<PropTypes> = ({
-  savedPolls, totalVotes, setUserInfo, userInfo
+  savedPolls, totalVotes, setUserInfo, userInfo, loading
 }) => {
   const classes = useStyles();
   const [input, setInput] = useState(false);
   const { setUser } = useAuth();
-
-
   const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
 
   const handleClick = () => {
@@ -101,39 +105,61 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        userInfo?._id === localStorage.getItem('userId')
-          ? (
-            <div>
-              <MoreMenu />
-              <div className={classes.avatarContainer}>
-                <Badge
-                  overlap="circle"
-                  anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                  }}
-                  badgeContent={(
-                    <div className={classes.badge}>
-                      <CameraAltIcon onClick={handleClick} />
-                    </div>
-                  )}
-                >
-                  <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-                </Badge>
+        loading
+          ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
+          : userInfo?._id === localStorage.getItem('userId')
+            ? (
+              <div>
+                <MoreMenu />
+                <div className={classes.avatarContainer}>
+                  <Badge
+                    overlap="circle"
+                    anchorOrigin={{
+                      vertical: 'bottom',
+                      horizontal: 'right'
+                    }}
+                    badgeContent={(
+                      <div className={classes.badge}>
+                        <CameraAltIcon onClick={handleClick} />
+                      </div>
+                    )}
+                  >
+                    <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
+                  </Badge>
+                </div>
+                <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
               </div>
-              <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
-            </div>
-)
-          : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
+            )
+            : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
+      }
+      {
+        loading
+          ? <Skeleton animation="wave" variant="rect" width={100} height={20} className={classes.skeleton} />
+          : (
+            <Typography variant="h5" className={classes.name}>
+              {userInfo?.username}
+              {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
+            </Typography>
+          )
       }
-      <Typography variant="h5" className={classes.name}>
-        {userInfo?.username}
-        {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
-      </Typography>
       <div className={classes.profileMenu}>
-        <Highlight text="Polls" value={savedPolls} />
-        <Highlight text="Since" value={dateSince} />
-        <Highlight text="Total votes" value={totalVotes} />
+        {
+          !loading
+            ? (
+              <>
+                <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} />
+              </>
+            )
+        }
       </div>
     </div>
   );
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 2c18466..82e5cd8 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -14,9 +14,11 @@ const ProfilePage: React.FC = () => {
   const [totalVotes, setTotalVotes] = useState<number>(0);
   const { page, navigate } = useNavigate();
   const { user } = useAuth();
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const id = page?.id || user?._id;
+    setIsLoading(true);
     if (id) {
       get(`/users/${id}`).then(response => {
         setUserInfo(response.data);
@@ -29,6 +31,7 @@ const ProfilePage: React.FC = () => {
             return total + left.votes + right.votes;
           }, 0
         ));
+        setIsLoading(false);
       });
     } else navigate('auth');
   }, [navigate, page, user]);
@@ -40,6 +43,7 @@ const ProfilePage: React.FC = () => {
         setUserInfo={setUserInfo}
         savedPolls={polls.length}
         totalVotes={totalVotes}
+        loading={isLoading}
       />
       <Feed polls={[...polls]} />
     </>