From 4263ead407fdd8bd17ed0ff3e4c07b1f0a71831e Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 21 Apr 2026 00:21:27 +0200
Subject: [PATCH] ui: animate loading indicator

---
 web/components/loading.templ | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/components/loading.templ b/web/components/loading.templ
index dd4dfb2..9ec1c8e 100644
--- a/web/components/loading.templ
+++ b/web/components/loading.templ
@@ -1,10 +1,12 @@
 package ui
 
 templ LoadingIndicator(text string) {
-	<div class="inline-flex items-center gap-2 text-sm text-(--text-muted)">
-		<div class="h-1.5 w-1.5 bg-(--text-faint)"></div>
-		<div class="h-1.5 w-1.5 bg-(--text-faint)"></div>
-		<div class="h-1.5 w-1.5 bg-(--text-faint)"></div>
-		<span>{ text }</span>
+	<div class="flex flex-col items-center justify-center gap-4 py-12">
+		<div class="flex gap-1.5">
+			<span class="h-2 w-2 rounded-full bg-(--text-faint) animate-bounce" style="animation-delay: 0ms;"></span>
+			<span class="h-2 w-2 rounded-full bg-(--text-faint) animate-bounce" style="animation-delay: 150ms;"></span>
+			<span class="h-2 w-2 rounded-full bg-(--text-faint) animate-bounce" style="animation-delay: 300ms;"></span>
+		</div>
+		<span class="text-xs uppercase tracking-widest text-(--text-faint)">{ text }</span>
 	</div>
 }