[UnderlineNav] : Introduce loading counters (#2378)

* loading state for counters - only for UnderlineNav

* CR feedback & changeset & docs and tests

* Update docs/content/drafts/UnderlineNav2.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* prop rename to loadingCounters

Co-authored-by: Cole Bemis <colebemis@github.com>

.changeset/four-cheetahs-hang.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+UnderlineNav2: Introducing loading states for counters

docs/content/drafts/UnderlineNav2.mdx

@@ -23,7 +23,7 @@ import {UnderlineNav} from '@primer/react/drafts'
 </UnderlineNav>
 ```
 
-### With icons
+### With Icons
 
 ```jsx live drafts
 <UnderlineNav>
@@ -50,7 +50,7 @@ import {UnderlineNav} from '@primer/react/drafts'
 
 When overflow occurs, the component first hides icons if present to optimize for space and show as many items as possible. (Only for fine pointer devices)
 
-#### Items without Icons
+#### Items Without Icons
 
 ```jsx live drafts
 <UnderlineNav>
@@ -78,7 +78,7 @@ When overflow occurs, the component first hides icons if present to optimize for
 </UnderlineNav>
 ```
 
-#### Display `More` menu
+#### Display `More` Menu
 
 If there is still overflow, the component will behave depending on the pointer.
 
@@ -111,6 +111,18 @@ If there is still overflow, the component will behave depending on the pointer.
 </UnderlineNav>
 ```
 
+### Loading state for counters
+
+```jsx live drafts
+<UnderlineNav loadingCounters={true}>
+  <UnderlineNav.Item counter={4} selected>
+    Item 1
+  </UnderlineNav.Item>
+  <UnderlineNav.Item counter={44}>Item 2</UnderlineNav.Item>
+  <UnderlineNav.Item>Item 3</UnderlineNav.Item>
+</UnderlineNav>
+```
+
 ## Props
 
 ### UnderlineNav
@@ -119,6 +131,12 @@ If there is still overflow, the component will behave depending on the pointer.
   <PropsTableRow name="aria-label" type="string" />
   <PropsTableRow name="aria-labelledby" type="string" />
   <PropsTableRow name="aria-describedby" type="string" />
+  <PropsTableRow
+    name="loadingCounters"
+    type="boolean"
+    defaultValue="false"
+    description="Whether all of the counters are in loading state"
+  />
   <PropsTableRow
     name="afterSelect"
     type="(event) => void"

src/UnderlineNav2/LoadingCounter.tsx

@@ -0,0 +1,17 @@
+import styled, {keyframes} from 'styled-components'
+import {get} from '../constants'
+
+const loading = keyframes`
+  from { opacity: 0.4; }
+  to { opacity: 0.8; }
+`
+
+export const LoadingCounter = styled.span`
+  animation: ${loading} 1.2s linear infinite alternate;
+  background-color: ${get('colors.neutral.emphasis')};
+  border-color: ${get('colors.border.default')};
+  width: 1.5rem;
+  height: 1rem; // 16px
+  display: inline-block;
+  border-radius: 20px;
+`

src/UnderlineNav2/UnderlineNav.test.tsx

@@ -94,4 +94,19 @@ describe('UnderlineNav', () => {
     expect(counter?.className).toContain('CounterLabel')
     expect(counter?.textContent).toBe('8')
   })
+  test('respect loadingCounters prop', () => {
+    const {getByText} = render(
+      <UnderlineNav label="Test nav" loadingCounters={true}>
+        <UnderlineNav.Item selected counter={4}>
+          Item 1
+        </UnderlineNav.Item>
+        <UnderlineNav.Item>Item 2</UnderlineNav.Item>
+        <UnderlineNav.Item>Item 3</UnderlineNav.Item>
+      </UnderlineNav>
+    )
+    const item = getByText('Item 1').closest('a')
+    const loadingCounter = item?.getElementsByTagName('span')[2]
+    expect(loadingCounter?.className).toContain('LoadingCounter')
+    expect(loadingCounter?.textContent).toBe('')
+  })
 })

src/UnderlineNav2/UnderlineNav.tsx

@@ -15,13 +15,18 @@ import {ChildWidthArray, ResponsiveProps, OnScrollWithButtonEventType} from './t
 import {moreBtnStyles, getDividerStyle, getNavStyles, ulStyles, scrollStyles, moreMenuStyles} from './styles'
 import {LeftArrowButton, RightArrowButton} from './UnderlineNavArrowButton'
 import styled from 'styled-components'
+import {LoadingCounter} from './LoadingCounter'
 
 export type UnderlineNavProps = {
   label: string
   as?: React.ElementType
   align?: 'right'
   sx?: SxProp
   variant?: 'default' | 'small'
+  /**
+   * loading state for all counters (to prevent multiple layout shifts)
+   */
+  loadingCounters?: boolean
   afterSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
   children: React.ReactNode
 }
@@ -133,7 +138,16 @@ const calculatePossibleItems = (childWidthArray: ChildWidthArray, navWidth: numb
 
 export const UnderlineNav = forwardRef(
   (
-    {as = 'nav', align, label, sx: sxProp = {}, afterSelect, variant = 'default', children}: UnderlineNavProps,
+    {
+      as = 'nav',
+      align,
+      label,
+      sx: sxProp = {},
+      afterSelect,
+      variant = 'default',
+      loadingCounters = false,
+      children
+    }: UnderlineNavProps,
     forwardedRef
   ) => {
     const backupRef = useRef<HTMLElement>(null)
@@ -248,6 +262,7 @@ export const UnderlineNav = forwardRef(
           setSelectedLink,
           afterSelect: afterSelectHandler,
           variant,
+          loadingCounters,
           iconsVisible
         }}
       >
@@ -282,7 +297,12 @@ export const UnderlineNav = forwardRef(
                         <ActionList.Item key={index} {...actionElementProps}>
                           <Box as="span" sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
                             {actionElementChildren}
-                            <CounterLabel>{actionElementProps.counter}</CounterLabel>
+
+                            {loadingCounters ? (
+                              <LoadingCounter />
+                            ) : (
+                              <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                            )}
                           </Box>
                         </ActionList.Item>
                       )

src/UnderlineNav2/UnderlineNavContext.tsx

@@ -7,12 +7,14 @@ export const UnderlineNavContext = createContext<{
   setSelectedLink: (ref: RefObject<HTMLElement>) => void
   afterSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
   variant: 'default' | 'small'
+  loadingCounters: boolean
   iconsVisible: boolean
 }>({
   setChildrenWidth: () => null,
   setNoIconChildrenWidth: () => null,
   selectedLink: undefined,
   setSelectedLink: () => null,
   variant: 'default',
+  loadingCounters: false,
   iconsVisible: true
 })

src/UnderlineNav2/UnderlineNavItem.tsx

@@ -7,6 +7,7 @@ import {UnderlineNavContext} from './UnderlineNavContext'
 import CounterLabel from '../CounterLabel'
 import {useTheme} from '../ThemeProvider'
 import {getLinkStyles, wrapperStyles, iconWrapStyles, counterStyles} from './styles'
+import {LoadingCounter} from './LoadingCounter'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {
@@ -70,6 +71,7 @@ export const UnderlineNavItem = forwardRef(
       setSelectedLink,
       afterSelect,
       variant,
+      loadingCounters,
       iconsVisible
     } = useContext(UnderlineNavContext)
     const {theme} = useTheme()
@@ -109,6 +111,7 @@ export const UnderlineNavItem = forwardRef(
       },
       [onSelect, afterSelect, ref, setSelectedLink]
     )
+
     return (
       <Box as="li" sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
         <Box
@@ -139,7 +142,7 @@ export const UnderlineNavItem = forwardRef(
             )}
             {counter && (
               <Box as="span" data-component="counter" sx={counterStyles}>
-                <CounterLabel>{counter}</CounterLabel>
+                {loadingCounters ? <LoadingCounter /> : <CounterLabel>{counter}</CounterLabel>}
               </Box>
             )}
           </Box>

src/UnderlineNav2/examples.stories.tsx

@@ -103,3 +103,23 @@ export const InternalResponsiveNav = (args: UnderlineNavProps) => {
     </UnderlineNav>
   )
 }
+
+export const CountersLoadingState = (args: UnderlineNavProps) => {
+  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)
+
+  return (
+    <UnderlineNav {...args} loadingCounters={true}>
+      {items.map((item, index) => (
+        <UnderlineNav.Item
+          key={item.navigation}
+          icon={item.icon}
+          selected={index === selectedIndex}
+          onSelect={() => setSelectedIndex(index)}
+          counter={item.counter}
+        >
+          {item.navigation}
+        </UnderlineNav.Item>
+      ))}
+    </UnderlineNav>
+  )
+}

src/UnderlineNav2/styles.ts

@@ -25,7 +25,9 @@ const defaultVariantLinkStyles = {
 }
 
 export const counterStyles = {
-  marginLeft: 2
+  marginLeft: 2,
+  display: 'flex',
+  alignItems: 'center'
 }
 
 export const getNavStyles = (theme?: Theme, props?: Partial<Pick<UnderlineNavProps, 'align'>>) => ({