From 6bd7ab8748bb52a118a86f62cf7b40b2e3e12235 Mon Sep 17 00:00:00 2001
From: Marcus Fihlon <marcus@fihlon.swiss>
Date: Tue, 28 Apr 2026 16:40:04 +0200
Subject: [PATCH] style(komoot): reuse shared loading indicator for activity
 list loading

Signed-off-by: Marcus Fihlon <marcus@fihlon.swiss>
---
 .../templates/activities/komoot.html          | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/templates/activities/komoot.html b/src/main/resources/templates/activities/komoot.html
index 07f61c0..ec70fcc 100644
--- a/src/main/resources/templates/activities/komoot.html
+++ b/src/main/resources/templates/activities/komoot.html
@@ -69,13 +69,7 @@
 
                         <div class="mt-4 d-flex justify-content-end gap-2 flex-wrap">
                             <button type="submit" class="btn btn-primary" id="loadActivitiesBtn">
-                                <span id="loadActivitiesText">
-                                    <i class="bi bi-arrow-repeat"></i> Load Komoot Activities
-                                </span>
-                                <span id="loadActivitiesSpinner" class="d-none">
-                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-                                    Loading...
-                                </span>
+                                <i class="bi bi-arrow-repeat"></i> Load Komoot Activities
                             </button>
                             <button type="button" class="btn btn-success" id="importFirstBtn" disabled>
                                 <span id="importFirstText">
@@ -94,6 +88,13 @@
                 </div>
             </div>
 
+            <div id="loadingIndicator" class="text-center py-5 d-none">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <p class="mt-2 text-muted mb-0">Loading Komoot activities...</p>
+            </div>
+
             <div id="resultsSection" class="mt-4 d-none">
                 <div class="d-flex justify-content-between align-items-center mb-3">
                     <h4 class="mb-0">
@@ -129,12 +130,11 @@
         document.addEventListener('DOMContentLoaded', function() {
             const form = document.getElementById('komootImportForm');
             const errorAlert = document.getElementById('errorAlert');
+            const loadingIndicator = document.getElementById('loadingIndicator');
             const resultsSection = document.getElementById('resultsSection');
             const resultsBody = document.getElementById('resultsBody');
             const resultCount = document.getElementById('resultCount');
             const loadActivitiesBtn = document.getElementById('loadActivitiesBtn');
-            const loadActivitiesText = document.getElementById('loadActivitiesText');
-            const loadActivitiesSpinner = document.getElementById('loadActivitiesSpinner');
             const importFirstBtn = document.getElementById('importFirstBtn');
             const importFirstText = document.getElementById('importFirstText');
             const importFirstSpinner = document.getElementById('importFirstSpinner');
@@ -149,8 +149,7 @@
 
             function setLoading(loading) {
                 loadActivitiesBtn.disabled = loading;
-                loadActivitiesText.classList.toggle('d-none', loading);
-                loadActivitiesSpinner.classList.toggle('d-none', !loading);
+                loadingIndicator.classList.toggle('d-none', !loading);
             }
 
             function setImportLoading(loading) {