Calling Tab.show() on multiple tabs results in content of multiple tabs showing at same time rather than last tab .show() was called on

Created by: unicornsoftwareinc

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

Issue: Having multiple tabs and then calling Tab.show() on multiple tabs "around the same time" results in the tab content of those tabs showing at the same time rather than only the last tab .show() was called on. This appears related to using .fade class

Expected behavior: I believe only the content of the last tab that had .show() called on should show. Only 1 tab content should ever be shown at one time.

In my app, the user can choose to display tabs at a specific time. So if they set multiple tabs to show at the same minute/second, it leads to this issue where the multiple tab contents are displaying at once. See attached screenshot:

You can also see the behavior in this codepen here: https://codepen.io/phil917/pen/zYRVxqZ

How to reproduce: Set up tabs in Bootstrap 5 using .nav and .nav-tabs. Add multiple tabs using .nav-item and .nav-link. Add corresponding tab content using .tab-content and .tab-pane and crucially, .fade

Using javascript, instantiate the various tabs and then call .show() all at the same time. You'll probably notice multiple tabs are showing their content at once now.

I believe there is some race condition going on which is causing the issue.

Reduced test cases

Link to codepen: https://codepen.io/phil917/pen/zYRVxqZ

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome