Callout slow performance

[richardtagger]

Bug Report

• Package version(s): 5.45.1
• Browser and OS versions: Chrome Latest / MacOS High Sierra

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: Yammer

Yammer are trying to use Callout for type ahead suggestions in the message publisher. Looking at flame graphs when debugging performance reveals hundreds of milliseconds spent recalculating styles in Stylesheet.js and async.js. The calls originate from from Callout. Features that are highly interactive and re-render on keypresses etc may laggy performance. Disabling animations in CSS does not alleviate the problem as it appears to be spinning inside of positioning logic.

Use of Callout is here https://github.com/Microsoft/YamUI/blob/master/src/components/SuggestionsList/SuggestionsList.tsx#L82

[Jahnp]

@joschect for FYI

[craftytrickster]

I have also noticed very bad slowdowns with Callouts and Stylesheet.js, often taking an entire second to even appear on the screen, no matter how simple the content of the callout.

Also worth noting that this affects dropdowns as well, since they use callouts under the hood.

[craftytrickster]

Related ticket #4047

[joschect]

After some investigation and trial and error this should be fixed with #4140

[craftytrickster]

thanks!

[craftytrickster]

@joschect I just tried version 5.58.0 and the slowness of the callouts is definitely still there.

[joschect]

@craftytrickster Is there any improvement in speed? If there are no improvements it's back to square one. If it's faster, but not fast enough, I have some other ideas for continued gains.

[craftytrickster]

@joschect The changes weren't really noticeable, it was still hanging for about a second before rendering. Maybe, it was like 100ms faster, but it is hard to say.

[joschect]

@craftytrickster okay, I think I can fix this too but it will take a bit longer. This next fix is a bit more in depth.

[craftytrickster]

Thank you for looking into it.