<UnderlineNav.Item /> without counter shows loading indicator

[cihad]

Description

If loadingCounters is true and an UnderlineNav.Item does not have a counter prop, the loading indicator is shown. Normally, if there are 10 items, if 1 or 2 of them do not have a counter prop, it does not pose a problem. But if there are no counters in 5 of them, it is not a nice view.

loadingCounters: true:

loadingCounters: false:

Steps to reproduce

Sample view:

<UnderlineNav aria-label="Repository" loadingCounters={true}>
  <UnderlineNav.Item>Inspect</UnderlineNav.Item>
  <UnderlineNav.Item counter={0}>Resources</UnderlineNav.Item>
  <UnderlineNav.Item counter={0}>Packages</UnderlineNav.Item>
  <UnderlineNav.Item>Code</UnderlineNav.Item>
  <UnderlineNav.Item>Docs</UnderlineNav.Item>
  <UnderlineNav.Item>Debug</UnderlineNav.Item>
</UnderlineNav>

Version

36.7.1

Browser

No response

[github-actions[bot]]

Uh oh! @cihad, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[broccolinisoup]

Hello @cihad 👋 Thanks for raising this issue. We think it makes sense and will give it a try. Feel free to push a PR if you would like, otherwise we will move this in our backlog.