[Bug]: Breadcrumb component gets hidden for some milliseconds while re-rendering

[nikhil0034]

Package

react

Package version

8.120.9

React version

17.0.2

Environment

System: OS: Windows 11 10.0.22631 CPU: (12) x64 Intel(R) Xeon(R) W-2133 CPU @ 3.60GHz Memory: 32.84 GB / 63.59 GB Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.22621.3527 npm packages: @fluentui/react: ^8.120.7 => 8.120.9

Current Behavior

I am using Breadcrumb component. It gets hidden for some milliseconds while re-rendering (it is not consistently reproing this behavior).

On further debugging, there is an intermediate stage where the component has been rendered but it is hidden: https://microsoftapc-my.sharepoint.com/:i:/g/personal/nikhiljindal_microsoft_com/EYCzKHcVrM1Nn9OoqGdOGnYBX8qyLFmp3RxTgaQuwVXqJQ?e=feGLAR (In above image, breadcrumb component is not showing up)

https://microsoftapc-my.sharepoint.com/:i:/g/personal/nikhiljindal_microsoft_com/Ef5JYjV8QHVOucw4KD5xS1IBajEFVGlPrw-p4ssN-Eau7Q?e=nUSOTn

I tried overriding this styling from client and it worked fine but it is not the ideal fix.

Expected Behavior

Breadcrumb component should render consistently without any lag

Reproduction

https://microsoftapc-my.sharepoint.com/:v:/g/personal/nikhiljindal_microsoft_com/EX0HvPeNJyxBhdQDBQgr2ZcBuGXplCLirB0R4zamkEL3RQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=pZ1PMA

Steps to reproduce

https://microsoftapc-my.sharepoint.com/:v:/g/personal/nikhiljindal_microsoft_com/EX0HvPeNJyxBhdQDBQgr2ZcBuGXplCLirB0R4zamkEL3RQ?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=pZ1PMA

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

@nikhil0034 are you able to create a reproduction using the "Export to Codepen" feature on our docsite?:

At first glance, this looks like an issue that may not be coming from Fluent. The styles and classnames in this screenshot you attached are not from our codebase, for example:

We actually don't have any styles in v8 Breadcrumb that I can find that would hide elements within it or render them offscreen. Without a working example, I don't think there's much more I can do to find the root cause 😅.

[tudorpopams]

Hello folks, support for v8 components is very limited from our side, but we do accept contributions, so feel free to submit a PR if you have a solution for this problem.