From 9ca741b09a9abc92f5f3264d4ed4471407f8faf6 Mon Sep 17 00:00:00 2001
From: somebody <onesome01@protonmail.com>
Date: Thu, 24 Nov 2022 23:36:04 -0600
Subject: [PATCH] Add loading thing for image gen

---
 static/koboldai.css            | 33 ++++++++++++++++++++++++++++++++-
 static/koboldai.js             | 14 +++++++++++---
 templates/settings flyout.html |  8 ++++++--
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index be6fdf74..a534b688 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -2988,8 +2988,39 @@ input[type='range'] {
 	pointer-events:none;
 }
 
+#action\ image {
+	width: 100%;
+	aspect-ratio: 1/1;
+	position: relative;
+}
+
+#image-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100% !important;
+	aspect-ratio: 1/1;
+	background-color: rgba(0, 0, 0, 0.6);
+
+	/* Defer pointer events to the image in case a user wants to quickly
+	save / view an image after asking for a new image */
+	pointer-events: none;
+}
+
+.spinner {
+	animation: spin 1s linear infinite;
+	opacity: 0.7;
+}
+
+@keyframes spin { 100% { transform: rotate(360deg) } }
+
+
 .action_image {
-	width: var(--flyout_menu_width);
+	width: 100%;
 }
 
 /*Tooltip based on attribute
diff --git a/static/koboldai.js b/static/koboldai.js
index c2805a15..4a8b42d8 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -790,9 +790,12 @@ function var_changed(data) {
 	//Special Case for story picture
 	} else if (data.classname == "story" && data.name == "picture") {
 		image_area = document.getElementById("action image");
-		while (image_area.firstChild) { 
-			image_area.removeChild(image_area.firstChild);
-		}
+
+		let maybeImage = image_area.getElementsByClassName("action_image")[0];
+		if (maybeImage) maybeImage.remove();
+
+		$el("#image-loading").classList.add("hidden");
+
 		if (data.value != "") {
 			var image = new Image();
 			image.src = 'data:image/png;base64,'+data.value;
@@ -5991,6 +5994,11 @@ $el("#aidgpromptnum").addEventListener("keydown", function(event) {
 	event.preventDefault();
 });
 
+$el("#generate-image-button").addEventListener("click", function() {
+	$el("#image-loading").classList.remove("hidden");
+	socket.emit("generate_image", {});
+});
+
 /* -- Shiny New Chat -- */
 function addMessage(author, content, actionId, afterMsgEl=null, time=null) {
 	if (!time) time = Number(new Date());
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 3ddf3c9a..8dcfcf52 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -112,8 +112,12 @@
 		</div>
 		<span id="debug-dump" class="cursor" onclick="openPopup('debug-file-prompt');">Download debug dump</span>
 		<div id="Images">
-			<button class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button>
-			<div id="action image"></div>
+			<button id="generate-image-button" class="settings_button var_sync_alt_system_generating_image" onclick="socket.emit('generate_image', {})">Generate Image</button>
+			<div id="action image">
+				<div id="image-loading" class="hidden">
+					<div class="spinner material-icons-outlined">autorenew</div>
+				</div>
+			</div>
 		</div>
 	</div>
 	<div id="setting_menu_settings" class="hidden settings_category_area tab-target tab-target-settings">