Fix navbar avatar fallback#140
Merged
stylessh merged 4 commits intostylessh:mainfrom Apr 17, 2026
Merged
Conversation
Owner
|
on each refresh the letters fallback always shows for a bit, it kind of bugs me. any fix on that? |
Contributor
📝 WalkthroughWalkthroughTwo layout components had avatar rendering refactored to always use Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/dashboard/src/components/layouts/dashboard-topbar.tsx (1)
237-252: Consider extracting a sharedUserAvatarsnippet to prevent drift.The same avatar JSX appears twice; a small local component/helper would keep styling/behavior changes synchronized.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/layouts/dashboard-topbar.tsx` around lines 237 - 252, The avatar JSX is duplicated in DashboardTopbar (used inside DropdownMenuTrigger and DropdownMenuContent); extract a small reusable component (e.g., UserAvatar) that wraps Avatar, AvatarImage and AvatarFallback and accepts props for user, displayName, initials and size/className so both instances reuse it; replace the two inline Avatar blocks with <UserAvatar user={user} displayName={displayName} initials={initials} size="size-7" /> and size="size-8" respectively, preserving the existing props (src fallback, alt, delayMs, border classes) so styling and behavior remain identical and future changes stay synchronized.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsx`:
- Around line 135-138: The AvatarFallback currently uses a fixed delayMs={400}
causing initials to wait even when no image exists; update the JSX around
AvatarImage and AvatarFallback so delayMs is conditional based on user.image
(e.g., pass delayMs={user.image ? 400 : 0} or omit the prop when user.image is
falsy) so that AvatarFallback renders immediately when user.image is missing;
check the AvatarImage, AvatarFallback, user.image, initials and displayName
usage in dashboard-mobile-nav.tsx to apply this change.
---
Nitpick comments:
In `@apps/dashboard/src/components/layouts/dashboard-topbar.tsx`:
- Around line 237-252: The avatar JSX is duplicated in DashboardTopbar (used
inside DropdownMenuTrigger and DropdownMenuContent); extract a small reusable
component (e.g., UserAvatar) that wraps Avatar, AvatarImage and AvatarFallback
and accepts props for user, displayName, initials and size/className so both
instances reuse it; replace the two inline Avatar blocks with <UserAvatar
user={user} displayName={displayName} initials={initials} size="size-7" /> and
size="size-8" respectively, preserving the existing props (src fallback, alt,
delayMs, border classes) so styling and behavior remain identical and future
changes stay synchronized.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 3338683a-baf3-4d01-8f29-b7407d5e67df
📒 Files selected for processing (2)
apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsxapps/dashboard/src/components/layouts/dashboard-topbar.tsx
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/dashboard/src/components/layouts/dashboard-topbar.tsx (1)
237-257: Optional: extract repeated avatar JSX into a small helper/component.The two avatar blocks are now identical; extracting a local
UserAvatarrenderer would reduce duplication and prevent future drift.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/layouts/dashboard-topbar.tsx` around lines 237 - 257, The two identical Avatar JSX blocks should be extracted to a small reusable component to remove duplication: create a local UserAvatar component (e.g., function UserAvatar({user, displayName, initials}) returning the Avatar/AvatarImage/AvatarFallback structure using user.image, displayName and initials, preserving delayMs logic) and replace both inline Avatar usages with <UserAvatar user={user} displayName={displayName} initials={initials} />; ensure props and className values ("size-7"/"size-8" differences if needed) are exposed so both places can pass the appropriate size/class.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/components/layouts/dashboard-topbar.tsx`:
- Around line 237-257: The two identical Avatar JSX blocks should be extracted
to a small reusable component to remove duplication: create a local UserAvatar
component (e.g., function UserAvatar({user, displayName, initials}) returning
the Avatar/AvatarImage/AvatarFallback structure using user.image, displayName
and initials, preserving delayMs logic) and replace both inline Avatar usages
with <UserAvatar user={user} displayName={displayName} initials={initials} />;
ensure props and className values ("size-7"/"size-8" differences if needed) are
exposed so both places can pass the appropriate size/class.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 538c6c70-4401-4e4d-88f7-09d3f9367d7a
📒 Files selected for processing (2)
apps/dashboard/src/components/layouts/dashboard-mobile-nav.tsxapps/dashboard/src/components/layouts/dashboard-topbar.tsx
Contributor
Author
Fixed now by making AvatarFallback delay conditional, so it uses delayMs={user.image ? 400 : 0} and no longer flashes initials when no image exists. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes the navbar profile avatar getting stuck on the fallback placeholder:
<img>handling withAvatarImageandAvatarFallbackin both desktop and mobile navigation.avatarLoadFailedflag that could force the navbar avatar to stay on initials after a single image load failure.Why
<img>plus a local failure flag.Validation
pnpm --filter @diffkit/dashboard checkpnpm --filter @diffkit/dashboard check-typespnpm --filter @diffkit/dashboard buildThe repo still has the existing
src/lib/github.functions.tsnon-null assertion warning duringcheck; this PR does not change that file.Summary by CodeRabbit