fix(ui5-menu): center busy state animation (#12907)

Related to: #12887

Author: didip1000

packages/base/package.json

@@ -46,7 +46,7 @@
   "devDependencies": {
     "@openui5/sap.ui.core": "1.120.17",
     "@ui5/webcomponents-tools": "1.24.25",
-    "chromedriver": "^137.0.0",
+    "chromedriver": "^143.0.4",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",

packages/fiori/package.json

@@ -54,6 +54,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.24.25",
-    "chromedriver": "^137.0.0"
+    "chromedriver": "^143.0.4"
   }
 }

packages/localization/package.json

@@ -35,7 +35,7 @@
     "@openui5/sap.ui.core": "1.120.17",
     "@ui5/webcomponents-tools": "1.24.25",
     "babel-plugin-amd-to-esm": "^2.0.3",
-    "chromedriver": "^137.0.0",
+    "chromedriver": "^143.0.4",
     "estree-walk": "^2.2.0",
     "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"

packages/main/package.json

@@ -57,6 +57,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.24.25",
-    "chromedriver": "^137.0.0"
+    "chromedriver": "^143.0.4"
   }
 }

packages/main/src/themes/Menu.css

@@ -14,6 +14,13 @@
 	width: 100%;
 }
 
+.ui5-menu-busy-indicator {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
 .ui5-menu-dialog-header {
 	display: flex;
 	height: var(--_ui5-responsive_popover_header_height);

packages/main/test/pages/Menu.html

@@ -77,6 +77,10 @@
 			<ui5-link id="detailsLink" href="https://en.wikipedia.org/wiki/Google_logo" target="_blank"></ui5-link>
 	</ui5-popover>
 
+	<ui5-button id="btnOpenLoading">Open Loading Menu</ui5-button>
+	<ui5-menu id="menuLoading" header-text="My ui5-menu" busy-delay="100" busy></ui5-menu>
+	</ui5-menu>
+
 	<script>
 		btnOpen.accessibilityAttributes = {
 			hasPopup: "Menu",
@@ -98,6 +102,10 @@
 			menu.open = btnToggleOpen.pressed;
 		});
 
+		btnOpenLoading.addEventListener("click", function() {
+			menuLoading.showAt(btnOpenLoading);
+		});
+
 		let fetched = false;
 
 		menu.addEventListener("ui5-before-open", function(event) {
@@ -116,6 +124,22 @@
 			}
 		});
 
+		menuLoading.addEventListener("ui5-before-open", function(event) {
+			const item = event.detail.item;
+			if (item && item.text === "Open" && !fetched) {
+				setTimeout(function() {
+					item.removeAttribute("busy");
+					item.removeAttribute("busy-delay");
+					let oneNode = document.createElement("ui5-menu-item");
+					oneNode.setAttribute("text", "Open from Amazon Cloud");
+					let twoNode = document.createElement("ui5-menu-item");
+					twoNode.setAttribute("text", "Open from Google Cloud");
+					item.append(oneNode, twoNode);
+					fetched = true;
+				}, 1000);
+			}
+		});
+
 		menu.addEventListener("ui5-item-click", function(event) {
 			const item = event.detail.item;
 			selectionInput.value = item.text;

yarn.lock

@@ -7214,15 +7214,6 @@ axios@^1.12.0:
     form-data "^4.0.4"
     proxy-from-env "^1.1.0"
 
-axios@^1.7.4:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.5.tgz#21eed340eb5daf47d29b6e002424b3e88c8c54b1"
-  integrity sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==
-  dependencies:
-    follow-redirects "^1.15.6"
-    form-data "^4.0.0"
-    proxy-from-env "^1.1.0"
-
 babar@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/babar/-/babar-0.2.0.tgz#79bc0f029721467207f2b6baedf96b3938ad7db0"
@@ -8090,13 +8081,13 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
   integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
 
-chromedriver@^137.0.0:
-  version "137.0.4"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-137.0.4.tgz#9889b6b4128676bcaa75573fa141c20ccdb76288"
-  integrity sha512-IxipIe0AnoQhWvG6eSTOLhVf1Tt586LA1IH4RdhGhXrrK6nZx8+VcKdjtlyZIV60S0CttUij/YnYuHAI+7qzWg==
+chromedriver@^143.0.4:
+  version "143.0.4"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-143.0.4.tgz#0ede0354f2970d8d650a6befc6b458d9cd8d32b9"
+  integrity sha512-mE++40DprY2n4d3OPxzW7ujIFRY9eLYwJf4uBgQtMaJQkapSVXRzUrLzSMcRaybrt47Y1t8xW5AKoaUIL3aYZw==
   dependencies:
     "@testim/chrome-version" "^1.1.4"
-    axios "^1.7.4"
+    axios "^1.12.0"
     compare-versions "^6.1.0"
     extract-zip "^2.0.1"
     proxy-agent "^6.4.0"
@@ -10856,15 +10847,6 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-form-data@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
-  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.8"
-    mime-types "^2.1.12"
-
 form-data@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053"