[BUG]: Profile toggle lacks visual cue when avatar image is loading

[babblebey]

Has this bug been raised before?

• I have checked "open" AND "closed" issues and this is not a duplicate

Description

The profile button in the navigation bar uses bg-transparent which makes it invisible when the user's avatar image hasn't loaded yet or fails to load. This creates a poor user experience where users can't tell there's supposed to be a profile button in that location.

Current Behavior

• When avatar image is loading: The button area appears completely empty/invisible
• When avatar fails to load: No fallback visual indication exists
• Users may not realize there's an interactive element present

Expected Behavior

• Profile button should have a visible background color as a fallback
• Users should always see that there's a clickable profile area, even before the avatar loads
• The existing bg-gray-200 class should be the primary background (it's already present but being overridden)

Steps to Reproduce

1. Log in to the application
2. Disable network or use dev tools to block the avatar image
3. Observe that the profile button area appears empty/invisible

Screenshots

screen-capture.8.webm

Do you want to work on this issue?

No

If "yes" to above, please explain how you would technically implement this

Proposed Solution

Remove the bg-transparent class from the profile button's className. The button already has bg-gray-200 which provides a nice gray background that serves as a perfect placeholder.

Current code:

className={`${isDropdownOpen && "ring-4"} relative bg-gray-200 flex items-center justify-center size-10 hover:ring-4 ring-gray-200 overflow-hidden bg-transparent rounded-full transition-colors duration-700 cursor-pointer focus-visible:outline-none`}

Should become:

className={`${isDropdownOpen && "ring-4"} relative bg-gray-200 flex items-center justify-center size-10 hover:ring-4 ring-gray-200 overflow-hidden rounded-full transition-colors duration-700 cursor-pointer focus-visible:outline-none`}

Additional Context

This is a good first issue because:

• ✅ Simple one-line fix (remove redundant class)
• ✅ Clear visual improvement
• ✅ No complex logic required
• ✅ Easy to test and verify

Definition of Done

• Remove bg-transparent class from profile button
• Verify profile button shows gray background when avatar is loading
• Test that existing functionality remains intact
• Avatar image still displays correctly when loaded

[tilakbeast]

Can you try adding alt attribute to the image tag? At least the users will be able to see that there is an element present at that place.

[babblebey]

There's actually an alt tag on the image 😁, the background thingy is even more intentional

[sirconfy]

@babblebey assign this to me.

[Dimaalahdab]

Hello
I’d like to work on this feature for Hacktoberfest
Please assign me if possible