chore: set AsyncComponent height to full while loading #2010
Conversation
|
@mkholjuraev I'm not sure if the We should much rather address the height issue where it occurs. The AsyncComponent does only append a class name to scope css, but it itself shouldn't apply any styling. |
|
@bastilian you may be right. I do not have a strong opinion on this. The thing is this component is used in many places and those pages/components also suffer from this problem. Also, I think this change only touches the height 100% style which is most probably expected for all the use cases. Thus, I thought this style may be an exception |
|
@mkholjuraev We should be looking at where the loading state comes from and make sure that it expands to full height. The |
|
The loading state is coming from here: I think the problem is that Bullseye does not stretch the height, but it only takes the inherited height that is not 100%. One more fix can be setting this height from the chroming app, the main content wrapper component (where we put our tenant apps). But, I am not sure if this would be a proper fix. |
| @@ -49,7 +48,7 @@ const BaseAsyncComponent: React.FunctionComponent<BaseAsyncComponentProps> = ({ | |||
| ...props, | |||
| }; | |||
| return ( | |||
| <Cmp className={classNames(className, appName)}> | |||
| <Cmp className={classNames(className, appName, 'pf-v5-u-h-100')}> | |||
There was a problem hiding this comment.
This is not something we can do. You can have multiple async components on a page and this will affect the overall layout of a page. You need to do this in your loading components that require the extra styling.
|
Thank you both! Will fix the issue in those proper places |
This is a minor fix to properly lay the loading icon in the center of the page. Previously, due to missing height, the loading icon was displayed on top of the page. Ping me if screen video is needed to explain what this fix is