TabSheet Stuck on Loading Animation When All Tabs Are Removed

Flow
1

Hi ,

I’m encountering an issue with the TabSheet component.

When all tabs are removed from a TabSheet, the component displays the loading animation .
TABSHEET

Is this a known issue are there any workarounds?


@Route("tabs-demo")
public class TabsDemoView extends VerticalLayout {

	private static final long serialVersionUID = 1L;

	private final TabSheet tabSheet = new TabSheet();
	private int tabCounter = 1;

	public TabsDemoView() {
		Button addButton = new Button("Add Tab", e -> addTab());
		Button removeButton = new Button("Remove Selected Tab", e -> removeSelectedTab());
		add(addButton, removeButton, tabSheet);
	}

	private void addTab() {
		String tabName = "Tab " + tabCounter;
		VerticalLayout content = new VerticalLayout(new Text("This is content for " + tabName));
		tabSheet.add(tabName, content);
		tabCounter++;
	}

	private void removeSelectedTab() {
		var selected = tabSheet.getSelectedTab();
		if (selected != null) {
			tabSheet.remove(selected);
		}
	}
}
2

Hi,

GitHub is a better place for reporting and bugs and follow-ups

Could you add comment to the ticket about Vaadin version and browser used by you.

I think it should be possible to hide it with CSS, like below:

vaadin-tabsheet.noloader::part(loader) {
   display: none;
}

Just add classname “noloader” tabSheet.addClassName("noloader") when you want to hide it.

3

The CSS works.

Thank You.