karelhala
commented
5 years ago This might be good example of custom table extension. But definetely not part of core implementation, the lazy load could be done in various ways. Either by passing the node that consumer wants to render or by passing function that will be called whenever user clicks on expand. And while this row is being loaded show some custom loading mechanism, like some spinner or component etc.
Btw nice improvement of my suggestion from https://github.com/project-koku/koku-ui/issues/469.
dlabrecq
stale[bot]
KKoukiou
As a user, I want the expanding rows to be lazily loaded.
In the Cost Management UI, each expandable row child generates multiple requests (up to 3 each) required to populate charts, progress bars etc.
While implementing the PF4 table, we noticed that all expandable row children are rendered at the same time. This means all requests are generated immediately, when the page is loaded, regardless if rows are expanded or not. This costs us in performance, taking up to 20+ seconds for the page to load.
As a workaround, I've implemented code to return null instead of providing a child component. This forces the row to lazy load when expanded, which is what we want. Instead of generating all possible requests, we only see 3 for the current row. Requests are cached, so this happens only once, as needed.
Ideally, it would be great if the table component did this for us -- we could omit our custom code to handle this. For example, the table 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 via our handleOnCollapse function.