Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement avatar loading shimmers and restrict privacy settings visibility by user role

Browse Source
This commit is contained in:
pradeepkumar
2026-03-28 17:01:37 +05:30
parent 391d717987
commit d0d43eb69b
10 changed files with 151 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/home/TopProfessionals.tsx
View File

@@ -39,10 +39,14 @@ function ProfessionalCard({
<div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
{/* Image */}
<div className="relative h-[226px] w-full overflow-hidden bg-gray-100">
{/* Initials base layer */}
<div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d] text-[72px]">{name?.[0]?.toUpperCase() || '?'}</span>
</div>
{/* Shimmer while loading, initials only on error */}
{imgError || isPlaceholder ? (
<div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d] text-[72px]">{name?.[0]?.toUpperCase() || '?'}</span>
</div>
) : !imgLoaded ? (
<div className="absolute inset-0 shimmer-loading" />
) : null}
{!isPlaceholder && !imgError && (
<Image
src={imageUrl}