feat: implement avatar loading shimmers and restrict privacy settings visibility by user role
This commit is contained in:
@@ -286,15 +286,16 @@ export default function AgentProfileView() {
|
||||
{/* Profile Image */}
|
||||
<div className="relative w-[200px] lg:w-[260px]">
|
||||
<div className="w-[200px] h-[200px] lg:w-[260px] lg:h-[260px] rounded-[15px] overflow-hidden bg-[#e8e8e8] relative">
|
||||
{/* Initials base layer */}
|
||||
<div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center rounded-[15px]">
|
||||
<span className="font-bold text-[#00293d] text-[80px]">{agentProfile?.firstName?.[0]?.toUpperCase() || '?'}</span>
|
||||
</div>
|
||||
{/* Shimmer while loading, initials only on error/no image */}
|
||||
{imageError || !getProfileImageUrl() ? (
|
||||
<div className="absolute inset-0 bg-[#c4d9d4] flex items-center justify-center rounded-[15px]">
|
||||
<span className="font-bold text-[#00293d] text-[80px]">{agentProfile?.firstName?.[0]?.toUpperCase() || '?'}</span>
|
||||
</div>
|
||||
) : !imageLoaded ? (
|
||||
<div className="absolute inset-0 shimmer-loading rounded-[15px]" />
|
||||
) : null}
|
||||
{getProfileImageUrl() && (
|
||||
<>
|
||||
{!imageLoaded && (
|
||||
<div className="absolute inset-0 shimmer-loading rounded-[15px]" />
|
||||
)}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
ref={(el) => { if (el?.complete) { if (el.naturalWidth > 0) setImageLoaded(true); else setImageError(true); } }}
|
||||
|
||||
Reference in New Issue
Block a user