ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix flicking while loading

Browse Source
This commit is contained in:
MD. Ariful Alam 2021-08-27 00:35:53 +06:00
parent 39d75d1e52
commit 19e158683d
1 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/AvatarCard.js
View File

@ -9,31 +9,39 @@ const AvatarCard = () => {
return (
<div className="card shadow-lg compact bg-base-100">
<div className="grid place-items-center py-8">
<div className="avatar opacity-90 fade-in">
<div className={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
{
loading ? (
skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})
) : (
<LazyImage
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
placeholder={
skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})
}
/>
)
}
</div>
</div>
{
loading ? (
<div className="avatar opacity-90">
<div className="mb-8 rounded-full w-32 h-32">
{
skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})
}
</div>
</div>
) : (
<div className="avatar opacity-90">
<div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
{
<LazyImage
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
placeholder={
skeleton({
width: 'w-full',
height: 'h-full',
shape: '',
})
}
/>
}
</div>
</div>
)
}
<div className="text-center mx-auto md:mx-8">
<h5 className="font-bold text-2xl">
{