From 8d340739aef8c52d60c96b3e3b2ae10beff05726 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 14 Feb 2023 15:14:45 +0800
Subject: [PATCH] Button with "idle" and "saving" states

---
 project-edit.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/project-edit.html b/project-edit.html
index 8236996..c992076 100644
--- a/project-edit.html
+++ b/project-edit.html
@@ -49,7 +49,13 @@
 		<div class="text-xs text-slate-500 italic -mt-3 mb-4">88/500 max. characters</div>
 
 		<div class="mt-8">
-			<input type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" value="Save Project" />
+			<button type="submit" class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2">
+				<!-- SHOW if in idle state -->
+				<span class="hidden">Save Project</span>
+
+				<!-- SHOW if in saving state; DISABLE button while in saving state -->
+				<span class=""><i class="fa-solid fa-spinner fa-spin-pulse"></i> Saving&hellip;</span>
+			</button>
 			<button type="button" class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md">Cancel</button>
 		</div>
 	</form>