Skip to content

Added new changes for flickering issues #7630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Priyanka-2725 wants to merge 4 commits into
base: main
Choose a base branch
from
+10 −1
Open

Added new changes for flickering issues #7630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c90d0f8
Added new changes for flickering issues
Mar 5, 2026
20392f5
Fixed changes requested in PR review
Mar 6, 2026
b87b790
Merge branch 'main' into my-new-branch
francinelucca Mar 6, 2026
47b8b4e
Merge branch 'main' into my-new-branch
francinelucca Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/actionbar-flicker-fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

ActionBar: Fixed flickering on initial render by applying visibility:hidden during initial width calculations. This prevents items from briefly appearing and then disappearing on slower devices.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,4 @@
"node_modules/@primer/primitives/dist/css/functional/themes/light-tritanopia.css"
],
"cssvar.files": ["node_modules/@primer/primitives/dist/css/**/*.css"]
}
}
4 changes: 4 additions & 0 deletions packages/react/src/ActionBar/ActionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,8 +303,10 @@
const [childRegistry, setChildRegistry] = ActionBarItemsRegistry.useRegistryState()

const [menuItemIds, setMenuItemIds] = useState<Set<string>>(() => new Set())
const [isInitialRender, setIsInitialRender] = useState(true)

const navRef = useRef<HTMLDivElement>(null)

Check failure on line 309 in packages/react/src/ActionBar/ActionBar.tsx

View workflow job for this annotation

GitHub Actions / lint 

Delete `··`
// measure gap after first render & whenever gap scale changes
useIsomorphicLayoutEffect(() => {
if (!listRef.current) return
Expand All @@ -322,6 +324,7 @@
if (navWidth > 0) {
const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap)
if (newMenuItemIds) setMenuItemIds(newMenuItemIds)
setIsInitialRender(false)
Copy link
Member

@siddharthkp siddharthkp Mar 11, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this mean for server rendering? Does this simply not render the ActionBar at all?

Which means the users that are currently affected (slow internet + slow cpu) will need to wait even longer for the javascript bundle arrives for the ActionBar to be visible, not ideal 🤔

I think we landed on a better strategy in UnderlineNav:

}
}, navRef as RefObject<HTMLElement>)

Expand Down Expand Up @@ -361,6 +364,7 @@
aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy}
data-gap={gap}
style={isInitialRender ? {visibility: 'hidden'} : undefined}
>
<ActionBarItemsRegistry.Provider setRegistry={setChildRegistry}>{children}</ActionBarItemsRegistry.Provider>
{menuItemIds.size > 0 && (
Expand Down
Loading