From aac58956b97754b27a9c85b90850602eb273495d Mon Sep 17 00:00:00 2001
From: nickchecan <nickchecan@localhost>
Date: Sat, 11 Jan 2025 21:51:59 -0600
Subject: [PATCH] feat: add loading indicator to ai request

---
 .../resources/views/scripts.js                | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/com.developer.nefarious.zjoule.plugin/resources/views/scripts.js b/com.developer.nefarious.zjoule.plugin/resources/views/scripts.js
index 73f1e21..b119339 100644
--- 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);
+	}
 }
\ No newline at end of file