From a4301694adffd06fdbac3f6ad66eba9a84ced0d5 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 13 Feb 2023 18:08:58 +0800
Subject: [PATCH] Added spinner animations for initial loading and infinite
 scroll

---
 project-list.html | 10 +++++++++-
 search.html       |  8 ++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/project-list.html b/project-list.html
index 143df37..dda2326 100644
--- a/project-list.html
+++ b/project-list.html
@@ -45,8 +45,12 @@
 	<!-- New Project -->
 	<a href="project-edit.html" class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"><i class="fa-solid fa-plus fa-fw"></i></a>
 
+	<!-- Initial Loading Animation -->
+	<!-- SHOW ME only during load of first set of results -->
+	<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading&hellip;</p>
+
 	<!-- Results List -->
-	<ul class="">
+	<ul>
 		<li class="border-b border-slate-300">
 			<a href="project-view.html" class="block py-4 flex gap-4">
 				<div class="flex-none w-12">
@@ -86,6 +90,10 @@
 			</a>
 		</li>
 	</ul>
+
+	<!-- Infinite Scroll Loading Animation -->
+	<!-- SHOW ME only while loading more results into list -->
+	<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading More&hellip;</p>
 </section>
 </body>
 
diff --git a/search.html b/search.html
index cb696f9..e42fa16 100644
--- a/search.html
+++ b/search.html
@@ -63,6 +63,10 @@
 		</ul>
 	</div>
 
+	<!-- Initial Loading Animation -->
+	<!-- SHOW ME only during load of first set of results -->
+	<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading&hellip;</p>
+
 	<!-- Results List -->
 	<ul class="">
 		<li class="border-b border-slate-300">
@@ -104,6 +108,10 @@
 			</a>
 		</li>
 	</ul>
+
+	<!-- Infinite Scroll Loading Animation -->
+	<!-- SHOW ME only while loading more results into list -->
+	<p class="hidden text-slate-500 text-center italic mt-8 mb-4"><i class="fa-solid fa-spinner fa-spin-pulse"></i> Loading More&hellip;</p>
 </section>
 </body>