Loading Icon while changing Tabs (Prevent UI Freeze)

In my usecase I have vaadin-tabs. On every tab change all components of a VerticalLayout VL are removed and another div is added to the VL.

In my case the added div contains a complex vaadin grid. The grid is already intialized (not generated when clicking the tab).
Sadly there are several seconds between selecting the tab and the browser displaying the div with the grid. This makes the UI feel unresponsive.

My tab change listener looks something like this:

        configurationTabs.addSelectedChangeListener(event -> {
            contentDiv.removeAll();
            switch (configurationTabs.getSelectedIndex()) {
                case 0:
                    contentDiv.add(simpleDiv);
                    break;
                case 1:
                    contentDiv.add(complexDiv);
                    break;
                default:
                    contentDiv.add(simpleDiv);
            }
        });

I am not sure why it takes so long. My guess would be that the browser needs time to render the complex grid.

Is there some way to show a loading indicater to prevent the ui from freezing?

does the delay happen only when selecting the tab with the Grid, or does it go as long for each of the tabs?

Is there some way to show a loading indicater to prevent the ui from freezing?

yes you can display any gif that indicates loading, but this will not “prevent the ui from freezing” but only make the user aware that he has to wait now while the ui is “frozen” (therefore making the user more accepting of the waiting time). this may be nitpicky, but it matters here. Adding such an indicator will not magically unfreeze your app.

If I were you, I would try to find the source of the long waiting time first. But if you dont succeed, here is how I would approach adding the loading indicator

configurationTabs.addSelectedChangeListener(event -> {
	// adds loading indicator to the selected tab until the tab is fully loaded 
	Tab selectedTab = event.getSelectedTab(); 
    Image throbber = new Image("img/throbber.gif", "loading indicator");
	selectedTab.add(throbber);
	
	contentDiv.removeAll();
	switch (configurationTabs.getSelectedIndex()) {
		case 0:
			contentDiv.add(simpleDiv);
			break;
		case 1:
			contentDiv.add(complexDiv);
			break;
		default:
			contentDiv.add(simpleDiv);
	}
	// remove throbber again after heavy operation
	selectedTab.remove(throbber);
});

Jonas,

When you say complex grud, can you clarify what that means? eg. number if rows, number of columns etc., and whether the grid is lazy liaded or not.

The few places where I use tabs I dont add and remove them completely. Instead i add the components when the tab is shown the first time and after that i hide or unhide content, depending on which tab is selected.

The problem is not caused by the. I experience the same behaviour when adding other complex layouts.

Martin Israelsen:
Instead i add the components when the tab is shown the first time and after that i hide or unhide content, depending on which tab is selected.

This sounds like a good solution I am going to try.