feat: add loading indicator to ai request

The-Nefarious-Developer · Jan 12, 2025 · aac5895 · aac5895
1 parent fd5f7e7
commit aac5895
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/com.developer.nefarious.zjoule.plugin/resources/views/scripts.js b/com.developer.nefarious.zjoule.plugin/resources/views/scripts.js
@@ -1,9 +1,37 @@
+const loadingIconSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="50" height="50" style="shape-rendering: auto; display: block; background: none;" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g>
+    <circle fill="#422e78" r="10" cy="50" cx="84">
+      <animate begin="0s" keySplines="0 0.5 0.5 1" values="10;0" keyTimes="0;1" calcMode="spline" dur="0.25s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="0s" values="#422e78;#d5c5ff;#a785ff;#8c60ff;#422e78" keyTimes="0;0.25;0.5;0.75;1" calcMode="discrete" dur="1s" repeatCount="indefinite" attributeName="fill"></animate>
+    </circle>
+    <circle fill="#422e78" r="10" cy="50" cx="16">
+      <animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="0s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+    <circle fill="#8c60ff" r="10" cy="50" cx="50">
+      <animate begin="-0.25s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="-0.25s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+    <circle fill="#a785ff" r="10" cy="50" cx="84">
+      <animate begin="-0.5s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="-0.5s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+    <circle fill="#d5c5ff" r="10" cy="50" cx="16">
+      <animate begin="-0.75s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="0;0;10;10;10" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="r"></animate>
+      <animate begin="-0.75s" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" values="16;16;16;50;84" keyTimes="0;0.25;0.5;0.75;1" calcMode="spline" dur="1s" repeatCount="indefinite" attributeName="cx"></animate>
+    </circle>
+  </g>
+</svg>
+`
+
 function sendMessage() {
 	const userInput = document.getElementById('userInput').value;
 	if (userInput.trim() === "") return;
 	try {
 		addUserMessage(userInput);
 		getAIResponse(userInput); // Java callback
+		startLoading();
 	} catch (e) {
 	}
 	updatePlaceholder();
@@ -33,6 +61,7 @@ function clearMessageAndScrollDown() {
 }
 
 function receiveMessage(output) {
+	finishLoading();
 	addBotMessage(output);
 	updatePlaceholder();
 	clearMessageAndScrollDown();
@@ -106,4 +135,21 @@ function showPlaceholder() {
 function hidePlaceholder() {
 	const placeholder = document.getElementById("placeholder");
 	placeholder.style.display = "none";
+}
+
+function startLoading() {
+	const chatBox = document.getElementById('chatBox');
+	const message = document.createElement('div');
+	message.className = 'message bot-message';
+	message.innerHTML = loadingIconSvg;
+	chatBox.appendChild(message);
+}
+
+function finishLoading() {
+	const chatBox = document.getElementById('chatBox');
+	const botMessages = document.getElementsByClassName('message bot-message');
+	if (botMessages.length > 0) {
+	  const loadingIndicator = botMessages[botMessages.length - 1];
+	  chatBox.removeChild(loadingIndicator);
+	}
 }