fix(ui5-list): remove busy indicator dom (#2712)

Follow up of #2684 where the placement of the busy has been fixed. With this change we make sure the busy ind DOM is not even rendered when the List is not busy. And, aims to fix the issue with components such as the ComboBox, Select and Input, that uses the List internally, would display additional space after the last list item.
SAP · Jan 21, 2021 · 90e998c · 90e998c
1 parent b8b7974
commit 90e998c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/main/src/List.hbs b/packages/main/src/List.hbs
@@ -47,7 +47,9 @@
 		{{/if}}
 	</div>
 
-	<div class="ui5-list-busy-row">
-		<ui5-busyindicator ?active="{{busy}}" size="Medium" class="ui5-list-busy-ind"></ui5-busyindicator>
-	</div>
+	{{#if busy}}
+		<div class="ui5-list-busy-row">
+			<ui5-busyindicator active size="Medium" class="ui5-list-busy-ind"></ui5-busyindicator>
+		</div>
+	{{/if}}
 </div>
diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js
@@ -7,9 +7,11 @@ describe("List Tests", () => {
 	});
 
 	it("List is rendered", () => {
-		const list = browser.$("ui5-list").shadow$(".ui5-list-root");
+		const list = browser.$("#infiniteScrollEx").shadow$(".ui5-list-root");
+		const busyInd = browser.$("#infiniteScrollEx").shadow$(".ui5-list-busy-row");
 
-		assert.ok(list, "List is rendered");
+		assert.ok(list.isExisting(), "List is rendered");
+		assert.notOk(busyInd.isExisting(), "Busy indicator is not rendered, when List is not busy");
 	});
 
 	it("itemPress and selectionChange events are fired in Single selection", () => {