Search code examples
vaadinvaadin-flowvaadin23

Vaadin 23 lazy loading Details component


I love Vaadin Details component. But it looks like it is always pre-rendered. Is it possible to turn the Details component into the lazy-loading mode?

I'd like to render the Details content when user expands the panel. Is it possible to achieve with the Details component? If no, what may be used instead in order to implement such behavior?


Solution

  • Details doesn't support lazy loading of components, but you can use addOpenedChangeListener to get around this. Use a placeholder component like div as content and once the listener is triggered with open=true replace the div with the real component. Keep in mind that the user can open/close the details multiple times. You have to keep track if the user has already opened it / your content was rendered once, so that's not re-created.