From 79b77845dda41f5cc66cd736dff73817f4af1fe8 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Fri, 3 Jul 2020 23:58:34 +0300 Subject: feat: add skeleton to avatar page --- src/pages/ProfilePage/ProfileInfo.tsx | 94 ++++++++++++++++++++++------------- 1 file changed, 60 insertions(+), 34 deletions(-) (limited to 'src/pages/ProfilePage/ProfileInfo.tsx') 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 = ({ - 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 = ({ return (
{ - userInfo?._id === localStorage.getItem('userId') - ? ( -
- -
- - -
- )} - > - - + loading + ? + : userInfo?._id === localStorage.getItem('userId') + ? ( +
+ +
+ + +
+ )} + > + + +
+
- -
-) - : + ) + : + } + { + loading + ? + : ( + + {userInfo?.username} + {userInfo?.verified && } + + ) } - - {userInfo?.username} - {userInfo?.verified && } -
- - - + { + !loading + ? ( + <> + + + + + ) + : ( + <> + + + + + ) + }
); -- cgit v1.2.3