diff --git a/internal/shared/ui/loading.templ b/internal/shared/ui/loading.templ
new file mode 100644
index 0000000..3dac5a5
--- /dev/null
+++ b/internal/shared/ui/loading.templ
@@ -0,0 +1,10 @@
+package ui
+
+templ LoadingIndicator(text string) {
+	<div class="loading-indicator">
+		<div class="loading-dot"></div>
+		<div class="loading-dot"></div>
+		<div class="loading-dot"></div>
+		<span>{ text }</span>
+	</div>
+}
diff --git a/internal/templates/catalog.templ b/internal/templates/catalog.templ
index d67d480..e32bab3 100644
--- a/internal/templates/catalog.templ
+++ b/internal/templates/catalog.templ
@@ -1,18 +1,14 @@
 package templates
 
 import "mal/internal/jikan"
+import "mal/internal/shared/ui"
 import "fmt"
 
 templ Catalog() {
 	@Layout("mal - catalog") {
 		<div class="catalog-grid" id="catalog-content">
 			<div hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML" style="grid-column: 1 / -1;">
-				<div class="loading-indicator">
-					<div class="loading-dot"></div>
-					<div class="loading-dot"></div>
-					<div class="loading-dot"></div>
-					<span>Loading catalog</span>
-				</div>
+				@ui.LoadingIndicator("Loading catalog")
 			</div>
 		</div>
 	}
diff --git a/internal/templates/index.templ b/internal/templates/index.templ
index 62d46e8..5d7e4ad 100644
--- a/internal/templates/index.templ
+++ b/internal/templates/index.templ
@@ -3,17 +3,15 @@ package templates
 import (
 	"fmt"
 	"mal/internal/jikan"
+	"mal/internal/shared/ui"
 	"net/url"
 )
 
 templ Search(q string) {
 	@Layout("mal - search") {
 		if q != "" {
-			<div class="loading-indicator htmx-indicator" id="loading">
-				<div class="loading-dot"></div>
-				<div class="loading-dot"></div>
-				<div class="loading-dot"></div>
-				<span>Searching...</span>
+			<div id="loading" class="htmx-indicator">
+				@ui.LoadingIndicator("Searching...")
 			</div>
 			<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
 		} else {
diff --git a/internal/templates/schedule.templ b/internal/templates/schedule.templ
index 368116a..d4c5e9d 100644
--- a/internal/templates/schedule.templ
+++ b/internal/templates/schedule.templ
@@ -1,6 +1,7 @@
 package templates
 
 import "mal/internal/jikan"
+import "mal/internal/shared/ui"
 import "fmt"
 import "strings"
 
@@ -21,12 +22,7 @@ templ Schedule() {
 			</div>
 
 			<div id="schedule-content" hx-get="/api/schedule?day=monday" hx-trigger="load">
-				<div class="loading-indicator">
-					<div class="loading-dot"></div>
-					<div class="loading-dot"></div>
-					<div class="loading-dot"></div>
-					<span>Loading schedule</span>
-				</div>
+				@ui.LoadingIndicator("Loading schedule")
 			</div>
 		</div>