Added spinner animations for initial loading and infinite scroll

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>
 

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>