As a user, I want tabs to be lazily loaded.
In the Cost Management UI, we have multiple tabs. Each tab child generates multiple requests (3 each) required to populate cards containing charts, progress bars etc.
While implementing the PF4 tabs component, I noticed that all tabs are rendered at the same time. This means all 9 requests are generated immediately, when the page is loaded, regardless if other tabs are active or not.
Unfortunately, none of my children components are updated when switching tabs in this scenario. We can step thru the tab code, but our child's componentDidUpdate method is never called because nothing changed.
As a side effect, the charts and progress bars in other tabs, do not render as expected when the tab is clicked. Only when a change is made; for example, the window resizes, the child components update and cards (i.e., charts, progress bars, etc.) render properly.
As a workaround, I've implemented code to return null instead of providing a tab child component. This forces the tabs to lazy load when active, which is what I want. Instead of generating 9 request, we only see 3 for the current tab. Requests are cached, so this happens only once, as needed.
Ideally, it would be great if the tabs component did this for us -- we could omit our custom code to handle this. For example, the tabs component might omit rendering children instead of just hiding them? We could even use a flag, like isLazyLoad, to enable this as a feature.
Below is an example of how we return null for lazy loading.
As a user, I want tabs to be lazily loaded.
In the Cost Management UI, we have multiple tabs. Each tab child generates multiple requests (3 each) required to populate cards containing charts, progress bars etc.
While implementing the PF4 tabs component, I noticed that all tabs are rendered at the same time. This means all 9 requests are generated immediately, when the page is loaded, regardless if other tabs are active or not.
Unfortunately, none of my children components are updated when switching tabs in this scenario. We can step thru the tab code, but our child's componentDidUpdate method is never called because nothing changed.
As a side effect, the charts and progress bars in other tabs, do not render as expected when the tab is clicked. Only when a change is made; for example, the window resizes, the child components update and cards (i.e., charts, progress bars, etc.) render properly.
As a workaround, I've implemented code to return null instead of providing a tab child component. This forces the tabs to lazy load when active, which is what I want. Instead of generating 9 request, we only see 3 for the current tab. Requests are cached, so this happens only once, as needed.
Ideally, it would be great if the tabs component did this for us -- we could omit our custom code to handle this. For example, the tabs component might omit rendering children instead of just hiding them? We could even use a flag, like isLazyLoad, to enable this as a feature.
Below is an example of how we return null for lazy loading.