Render Module with Lazy Loading or similar strategy (workaround)


We are creating an UI with many sub-modules. What I simply want to achive is, I would like to show/activate selected module on the main screen.

Actually we achived this with "Tabbed Container" BUT It loads/renders all the imported modules at the same time. I just want to RENDER selected module ONLY WHEN user selects it from menu.

The reason behind of this, all the modules have their own "on page load" queries, and in current situation they're all running their own queries immediately because they are already placed in "Tabbed Container". Actually what I am looking for is, "Tabbed Container" with lazy-loading - or similar workaround for this issue.

Any help will be appreciated, thanks.

Hey @can_93!

This is something that is on the radar for our dev team but at the moment I can't give you a timeline for when this kind of behavior will be supported.

In the meantime, you might consider having the queries that run on page load within each module be triggered when the tab is selected. This post has more information on how to trigger queries within modules. If you pass a conditional like {{ tabbedContainer.currentViewKey === 'view key corresponding to your module' }} as an input to your module you can also set those queries to run only when the appropriate tab is open.

Let me know if that seems like it might work for you or if your use case differs!

Do you have any updates on this? I'm needing to implement some strategy like lazy load to prevent the app to take 20secs to load and get slow during usage time.

Any workaround besides running the queries of the module when the tab of that module is selected? I have 5 modules and hundreds of queries so this would be a weird/slow solution to implement in all of them.

Hey @Thiago_Robles!

No updates yet. The only workarounds I'm aware of are a bit more general and may or may not apply to your design. There are a number of recommendations on how to improve performance on this docs page. In particular, you might try splitting your app into separate apps that share a header/sidebar. With that and a combination of query caching and local storage you may be able to achieve an experience similar to lazy-loaded components.