Fl/test

.changeset/actionbar-flicker-fix.md

@@ -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.

packages/react/src/ActionBar/ActionBar.test.tsx

@@ -7,6 +7,22 @@ import {BoldIcon, ItalicIcon, CodeIcon} from '@primer/octicons-react'
 import {implementsClassName} from '../utils/testing'
 import classes from './ActionBar.module.css'
 
+// Mock ResizeObserver to trigger callback immediately with a positive width
+// This ensures isInitialRender becomes false and the toolbar is visible
+const mockUnobserve = vi.fn()
+const mockDisconnect = vi.fn()
+
+globalThis.ResizeObserver = vi.fn().mockImplementation(function (callback) {
+  return {
+    observe: vi.fn().mockImplementation(() => {
+      // Trigger the callback synchronously when observe is called
+      callback([{contentRect: {width: 500, height: 40}} as ResizeObserverEntry])
+    }),
+    unobserve: mockUnobserve,
+    disconnect: mockDisconnect,
+  }
+})
+
 describe('ActionBar', () => {
   implementsClassName(ActionBar, classes.Nav)
   afterEach(() => {

packages/react/src/ActionBar/ActionBar.tsx

@@ -303,8 +303,10 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
   const [childRegistry, setChildRegistry] = ActionBarItemsRegistry.useRegistryState()
 
   const [menuItemIds, setMenuItemIds] = useState<Set<string>>(() => new Set())
+  const [isInitialRender, setIsInitialRender] = useState(true)
 
   const navRef = useRef<HTMLDivElement>(null)
+
   // measure gap after first render & whenever gap scale changes
   useIsomorphicLayoutEffect(() => {
     if (!listRef.current) return
@@ -322,6 +324,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     if (navWidth > 0) {
       const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap)
       if (newMenuItemIds) setMenuItemIds(newMenuItemIds)
+      setIsInitialRender(false)
     }
   }, navRef as RefObject<HTMLElement>)
 
@@ -361,6 +364,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledBy}
           data-gap={gap}
+          style={isInitialRender ? {visibility: 'hidden'} : undefined}
         >
           <ActionBarItemsRegistry.Provider setRegistry={setChildRegistry}>{children}</ActionBarItemsRegistry.Provider>
           {menuItemIds.size > 0 && (