Render large component AFTER navigation stops

I have a view with a large form. The form has over 120 drop downs. When navigating to the form view, it seems like Vaadin gets stuck for about a second, not showing the loading indicator and then it renders the whole form at once. When I comment out the lines where the dropdowns are added to the layout, everything works very smoothly.

I would like to delay the rendering of the component somehow. I.e. when navigating to the view, the dropdowns would not be rendered, instead a spinner would be shown in their place and THEN it would add the dropdowns. That way navigation is fast.

How do I delay the rendering in this way?

Push comes to mind but that won’t really help in the long run. You should try to change your Combobox logic so that setItems is only called once user interact with them (focus listener), this should drastically improve the Performance

One easy solution ( but requires some UX changes) is to not put 120 comboboxes in a view, or create multiple tabs. Another solution might be to use this addon with a component observer ( and render the field when it’s visible) Superfields Demo App for Vaadin 24

Of course it depends if the rendering is slow or if the setItems is slow

i am trying to shift things to afterNavigation callback, but it seems the UI blocks until all of that is done too :thinking:

i dont think it’s .setItems, commenting that out doesn’t seem to help, commenting out the layout.add(manyDropdowns) does help

Afternavigation won’t help nope :sweat_smile:

yep, exactly same performance after i moved it to the callback :frowning_with_open_mouth:

You can try the vaadin-select if your drop-downs have a small amount of items

( or some of them)

i am actually using Select everywhere

You mean with the addon?

no, i am not using the add on

but yeah ComopnentObserver would probably solve this… seems a bit brittle though

So try the comboboxes especially if you have a lot of items ( since the select items are not lazy loaded)

the loading indicator also behaves strange… when i click to navigate to the slow view, the app freezes for a second, then shows the loading for couple ms and then the whole view appears :thinking:

The loading indicator has a small delay of 500-700ms if I remember correctly so that it doesn’t spin up instantly