fix(ui5-list): growing button loading aligned with visual spec (SAP#9977

)

The new visual spec mandates that when we have growing with button
there shouldn't be busy indicator overlay on top of the whole list
but a small one next to "More" text without blocking the rest of the
list.

packages/main/src/List.hbs

@@ -19,7 +19,7 @@
 	<ui5-busy-indicator
 		id="{{_id}}-busyIndicator"
 		delay="{{loadingDelay}}"
-		?active="{{loading}}"
+		?active="{{showBusyIndicatorOverlay}}"
 		class="ui5-list-busy-indicator"
 	>
 	<div class="ui5-list-scroll-container">
@@ -96,6 +96,12 @@
 			@mouseup="{{_onLoadMoreMouseup}}"
 			growing-button-inner
 		>
+			{{#if loading}}
+				<ui5-busy-indicator
+					delay="{{loadingDelay}}"
+					active>
+				</ui5-busy-indicator>
+			{{/if}}
 			<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
 		</div>
 	</div>

packages/main/src/List.ts

@@ -652,6 +652,10 @@ class List extends UI5Element {
 		return this.getItems().length !== 0;
 	}
 
+	get showBusyIndicatorOverlay() {
+		return !this.growsWithButton && this.loading;
+	}
+
 	get showNoDataText() {
 		return !this.hasData && this.noDataText;
 	}

packages/main/src/themes/GrowingButton.css

@@ -13,7 +13,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	flex-direction: column;
+	flex-direction: row;
 	min-height: var(--_ui5_load_more_text_height);
 	width: 100%;
 	color: var(--sapButton_TextColor);
@@ -46,7 +46,6 @@
 
 [growing-button-text],
 [growing-button-subtext] {
-	width: 100%;
 	text-align: center;
 	font-family: "72override", var(--sapFontFamily);
 	white-space: nowrap;
@@ -62,6 +61,10 @@
 	font-weight: bold;
 }
 
+:host([loading]) [growing-button-text]{
+	padding-left: 0.5rem;
+}
+
 [growing-button-subtext] {
 	font-size: var(--sapFontSize);
 	padding: var(--_ui5_load_more_desc_padding);