noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 20:00:25 +00:00
Code Issues 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
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 ( return (
<div className="card shadow-lg compact bg-base-100"> <div className="card shadow-lg compact bg-base-100">
<div className="grid place-items-center py-8"> <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 ? (
{ <div className="avatar opacity-90">
loading ? ( <div className="mb-8 rounded-full w-32 h-32">
skeleton({ {
width: 'w-full', skeleton({
height: 'h-full', width: 'w-full',
shape: '', height: 'h-full',
}) shape: '',
) : ( })
<LazyImage }
src={profile.avatar ? profile.avatar : fallbackImage} </div>
alt={profile.name} </div>
placeholder={ ) : (
skeleton({ <div className="avatar opacity-90">
width: 'w-full', <div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
height: 'h-full', {
shape: '', <LazyImage
}) src={profile.avatar ? profile.avatar : fallbackImage}
} alt={profile.name}
/> placeholder={
) skeleton({
} width: 'w-full',
</div> height: 'h-full',
</div> shape: '',
})
}
/>
}
</div>
</div>
)
}
<div className="text-center mx-auto md:mx-8"> <div className="text-center mx-auto md:mx-8">
<h5 className="font-bold text-2xl"> <h5 className="font-bold text-2xl">
{ {