From 79b77845dda41f5cc66cd736dff73817f4af1fe8 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Fri, 3 Jul 2020 23:58:34 +0300
Subject: feat: add skeleton to avatar page
---
src/pages/ProfilePage/ProfileInfo.tsx | 94 ++++++++++++++++++++++-------------
src/pages/ProfilePage/ProfilePage.tsx | 4 ++
2 files changed, 64 insertions(+), 34 deletions(-)
(limited to 'src/pages')
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]} />
</>
--
cgit v1.2.3