fix(ui5-list): improved loading state (#9520)

* fix(ui5-list): improved loading state

Loading state wasn't displayed properly.
This change adapts the list to the busy indicator and fixes the issue.

Fixes: #9476

packages/main/src/List.hbs

@@ -16,6 +16,12 @@
 	@ui5-_selection-requested={{onSelectionRequested}}
 	@ui5-_focus-requested={{onFocusRequested}}
 >
+	<ui5-busy-indicator
+		id="{{_id}}-busyIndicator"
+		delay="{{loadingDelay}}"
+		?active="{{loading}}"
+		class="ui5-list-busy-indicator"
+	>
 	<div class="ui5-list-scroll-container">
 		{{! header}}
 		{{#if header.length}}
@@ -66,23 +72,11 @@
 
 		<span tabindex="-1" aria-hidden="true" class="ui5-list-end-marker"></span>
 	</div>
-
-	{{#if loading}}
-		<div class="ui5-list-loading-row">
-			<ui5-busy-indicator
-				delay="{{loadingDelay}}"
-				active
-				class="ui5-list-loading-ind"
-				style="{{styles.loadingInd}}"
-				data-sap-focus-ref
-			></ui5-busy-indicator>
-		</div>
-	{{/if}}
-
 	<ui5-drop-indicator
 		orientation="Horizontal"
 		.ownerReference="{{this}}"
 	></ui5-drop-indicator>
+	</ui5-busy-indicator>
 </div>
 
 

packages/main/src/List.ts

@@ -715,22 +715,6 @@ class List extends UI5Element {
 		return this.growingButtonText || List.i18nBundle.getText(LOAD_MORE_TEXT);
 	}
 
-	get loadingIndPosition() {
-		if (!this.grows) {
-			return "absolute";
-		}
-
-		return this._inViewport ? "absolute" : "sticky";
-	}
-
-	get styles() {
-		return {
-			loadingInd: {
-				position: this.loadingIndPosition,
-			},
-		};
-	}
-
 	get listAccessibleRole() {
 		return this.accessibleRole.toLowerCase();
 	}

packages/main/src/themes/List.css

@@ -16,28 +16,8 @@
 	border-bottom: 0;
 }
 
-:host([loading]) {
-	opacity: 0.72;
-}
-
-:host([loading]) .ui5-list-loading-row {
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	top: 0;
-	outline: none;
-}
-
-:host([loading]) .ui5-list-loading-ind {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 1;
-}
-
-.ui5-list-root {
+.ui5-list-root,
+.ui5-list-busy-indicator {
 	width: 100%;
 	height: 100%;
 	position: relative;
@@ -47,6 +27,7 @@
 .ui5-list-scroll-container {
 	overflow: auto;
 	height: 100%;
+	width: 100%;
 }
 
 .ui5-list-ul {