docs: add busy indicator in Quick Prompt AI Pattern

packages/website/docs/_samples/patterns/AIQuickPrompt/main.css

@@ -29,4 +29,9 @@
 	justify-content: flex-end;
 	gap: 0.25rem;
 	padding: 0 0.75rem 0.75rem 0.75rem;
+}
+
+.quickPromptBusyIndicator{
+	width: 100%;
+	height: 100%;
 }

packages/website/docs/_samples/patterns/AIQuickPrompt/main.js

@@ -25,6 +25,7 @@ var currentTextKey;
 var translationKey = "en";
 const sendButton = document.getElementById("footerBtnSend");
 const toast = document.getElementById("quickPromptToast");
+const quickPromptBusyIndicator = document.getElementById("quickPromptBusyIndicator");
 const predefinedTexts = texts.predefinedTexts;
 const predefinedTextsBulleted = texts.predefinedTextsBulleted;
 const predefinedTextsExpanded = texts.predefinedTextsExpanded;
@@ -38,12 +39,12 @@ function aiQuickPromptButtonClickHandler(e) {
 		case "":
 		case "generate":
 			button.state = "generating";
+			quickPromptBusyIndicator.active = true;
 			sendButton.disabled = true;
-			startQuickPromptGeneration(button);
 			const keys = Object.keys(predefinedTexts[translationKey]);
 			const randomKey = keys[Math.floor(Math.random() * keys.length)];
 			currentTextKey = randomKey;
-			generateText(predefinedTexts[translationKey][randomKey], button);
+			stopBusyIndicatorAndGenerateText(button, predefinedTexts);
 			break;
 		case "generating":
 			button.state = "revise";
@@ -75,6 +76,7 @@ function stopQuickPromptGeneration() {
 	generationStopped = true;
 	sendButton.disabled = false;
 	output.disabled = false;
+	quickPromptBusyIndicator.active = false;
 }
 
 sendButton.addEventListener("click", function() {
@@ -147,17 +149,26 @@ menu1.addEventListener("item-click", function (e) {
 });
 
 function setStateAndGenerate(button, state, textKey, predefinedTexts) {
+	quickPromptBusyIndicator.active = true;
 	button.state = state;
-	startQuickPromptGeneration(button);
-	generateText(predefinedTexts[translationKey][textKey], button);
+	stopBusyIndicatorAndGenerateText(button, predefinedTexts, textKey);
+
 }
 
 function startTextGeneration(button, state, predefinedTexts) {
+	quickPromptBusyIndicator.active = true;
 	button.state = state;
-	startQuickPromptGeneration(button);
-	generateText(predefinedTexts[translationKey][currentTextKey], button);
+	stopBusyIndicatorAndGenerateText(button, predefinedTexts);
 }
 
+function stopBusyIndicatorAndGenerateText(button, predefinedTexts, textKey) {
+	setTimeout(() => {
+		quickPromptBusyIndicator.active = false;
+		generateText(predefinedTexts[translationKey][textKey || currentTextKey], button);
+	}, 2000);
+	startQuickPromptGeneration(button);
+ }
+
 function clearValueState(output) {
 	output.valueState = "None";
 }
@@ -206,7 +217,14 @@ function generateText(text, button) {
 		} else {
 			if (!generationStopped) {
 				button.state = "revise";
+				button.accessibilityAttributes = {
+					root: {
+						hasPopup: "menu",
+						roleDescription: "Menu Button"
+					}
+				};
 				output.valueState = "None";
+				quickPromptBusyIndicator.active = false;
 			}
 			clearInterval(generationId);
 			sendButton.disabled = false;

packages/website/docs/_samples/patterns/AIQuickPrompt/sample.html

@@ -30,7 +30,9 @@
 					<ui5-ai-button-state name="revise" text="Revise" icon="ai" end-icon="navigation-down-arrow"></ui5-ai-button-state>
 				</ui5-ai-button>
 			</div>
-			<ui5-textarea id="output" style="height: 100%;"></ui5-textarea>
+				<ui5-busy-indicator class="quickPromptBusyIndicator" id="quickPromptBusyIndicator">
+				<ui5-textarea id="output" style="height: 100%;"></ui5-textarea>
+
 		</section>
 		<div class="quickPromptCardFooter">
 			<ui5-button id="footerBtnSend" design="Emphasized">Send</ui5-button>

packages/website/docs/_samples/patterns/AIRegenerate/Basic/sample.html

@@ -71,9 +71,9 @@
 			Regenerating will overwrite all fields with AI-generated content.<br>
 			Do you want to continue?
 		</ui5-text>
-		<ui5-checkbox id="checkbox" style="margin-inline-start: -0.625rem;" text="Don't show this message again"></ui5-checkbox>
+		<ui5-checkbox id="checkbox" style="margin-inline-start: -0.625rem;" text="Don't ask me again"></ui5-checkbox>
 		<div slot="footer" class="dialog-footer">
-			<ui5-button design="Emphasized" id="dialogProceed">Proceed</ui5-button>
+			<ui5-button design="Emphasized" id="dialogProceed">Regenerate</ui5-button>
 			<ui5-button id="dialogCloser">Cancel</ui5-button>
 		</div>
 		</ui5-dialog>