Popout styles load after a delay

[raplemie]

Describe the bug

I'm not 100% sure when this started, looks around 4.15, we dont control the application in which our packages are used. (Feels related to #940, but I don't know if this is published yet so maybe 940 would be a fix for it ?)

We are using viewport in popouts, and in order for these viewport to be working correctly, the surrounding css needs to be present so the display is flex (otherwise the viewport component does not expand all the height available)

With numerous test trying to understand what's going on, I noticed that when it does work, the styles from the classes appears to be applied at the viewport creation, while otherwise the viewport height is 0 as no styles from classes appears to be applied.

To Reproduce

I dont have an easy to reproduce path to recreate this, please contact me so I can demo and maybe we can recreate a clear path to reproduce. (Maybe a simple viewport in a popout widget would work)

Expected Behavior

The styles (classes) are downloaded and applied before the widget content is rendered.

Screenshots

No response

Desktop (please complete the applicable information)

Chrome,
AppUI 4.16.1

Additional context

Testing with overriding the ViewportComponent minheight and maxheight (through chrome dev tools overrides) always cause this to work correctly. I have tested with providing css that would cause this through the classes, but this css does not appear to be loaded when the component is mounted. So no "class" solution works over this. Our solution to this exact problem (which was much less common before) would be to override the styles directly to the viewport component, but it requires us to make a lot of changes, so if this could be fixed in a patch in AppUI as it used to work, it would be nice...

Ultimately this is a timing problem.

[raplemie]

@ignas-k @GerardasB I see that this was moved to Full Backlog, which apparently is "Don plan to fix in the near future". This is a regression preventing the use of popout widget, our team has been trying to get this to production for the last 2 years, it would be nice to have this investigated.

[ignas-k]

My bad, I moved it to the wrong category. We are planning to work on it soon.

[mayank99]

@raplemie Can you elaborate on what the actual issue is? In the absence of a repro link, a screen-recording would greatly help understand what is going on. (I'm asking because I worked on #940).

[raplemie]

@mayank99 Here is a demo/debug of what's going on, I created a cleaner version than my previous comment.

I describe it in the video but basically the styles are not "used" at the moment of the widget mounting in react and in our case this is causing an issue because the ViewportComponent from AppUI requires a non null height and width or otherwise crash. We added a couple of things to ensure that this is never the case, but since the css styles are not applied (inline styles do work though) this is a problem.

UpdatedDemoOfPopoutWithouthSytles.mp4

[GerardasB]

#940 is released with https://github.com/iTwin/appui/releases/tag/release%2F4.16.0