Fix layout shift in home component

[pleek91]

Closes #14111

[collincchoy]

Hm is this really an issue? I tried to repro, and to me, it seems like the bigger issue is most of the dashboard content is dynamic and on refreshes, I see the giant Ready to scale banner flash above the fold before it shifts downward which makes me think we'd be better off tweaking the other content on this page rather than the title?

Or maybe hold the banner until the data is loaded also? if i'm reading correctly, seems like the heading and most-content is contingent on the flow run count subscription but the banner isn't so i see the banner get shifted on load.

[pleek91]

Hm is this really an issue? I tried to repro, and to me, it seems like the bigger issue is most of the dashboard content is dynamic and on refreshes, I see the giant Ready to scale banner flash above the fold before it shifts downward which makes me think we'd be better off tweaking the other content on this page rather than the title?

Or maybe hold the banner until the data is loaded also? if i'm reading correctly, seems like the heading and most-content is contingent on the flow run count subscription but the banner isn't so i see the banner get shifted on load.

TBH maybe I "reproduced" the wrong thing. But I noticed that because the filters on the dashboard are v-ifd based on some async data. The header starts out as just the "Home" title (which is not as tall) and then when the filters load in the header grows in height causing the "Home" title to shift. Setting a min height fixed that so that "Home" didn't move.

But we could also await the data or use a loader on the whole page until the data is loaded. And that would also fix the problem I think.

[collincchoy]

Hm is this really an issue? I tried to repro, and to me, it seems like the bigger issue is most of the dashboard content is dynamic and on refreshes, I see the giant Ready to scale banner flash above the fold before it shifts downward which makes me think we'd be better off tweaking the other content on this page rather than the title?
Or maybe hold the banner until the data is loaded also? if i'm reading correctly, seems like the heading and most-content is contingent on the flow run count subscription but the banner isn't so i see the banner get shifted on load.

TBH maybe I "reproduced" the wrong thing. But I noticed that because the filters on the dashboard are v-ifd based on some async data. The header starts out as just the "Home" title (which is not as tall) and then when the filters load in the header grows in height causing the "Home" title to shift. Setting a min height fixed that so that "Home" didn't move.

But we could also await the data or use a loader on the whole page until the data is loaded. And that would also fix the problem I think.

🤔 from what i can tell(by observation and also code), the actions actually always render in regardless of the flow run count subscription because v-if="!empty" returns true before the subscription is even finished executing since empty = subscription.response === 0 and undefined === 0 -> false and !false -> true
-😅 haha sorry for spelling it out. also for myself since it's not immediately obv that that's what happening.

separate thought, at small screens, the heading folds to vertical layout which min-h-11 is probably too small for.

[aaazzam]

TBH maybe I "reproduced" the wrong thing.

Nah that's what I had in mind when I made the issue -- thanks!