From 1836eedfe8bdff92550500f8e8eb91ea2125143f Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Sun, 11 May 2025 09:19:53 +0200
Subject: [PATCH] Better loading indicator

---
 src/digimarks/static/js/digimarks.js    | 4 ++++
 src/digimarks/templates/user_index.html | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/digimarks/static/js/digimarks.js b/src/digimarks/static/js/digimarks.js
index bf1dffc..050ed59 100644
--- a/src/digimarks/static/js/digimarks.js
+++ b/src/digimarks/static/js/digimarks.js
@@ -117,6 +117,7 @@ document.addEventListener('alpine:init', () => {
         },
 
         async sortAlphabetically(order = 'asc') {
+            this.loading = true;
             this.sort_created_asc = false;
             this.sort_created_desc = false;
             this.sort_title_asc = false;
@@ -128,8 +129,10 @@ document.addEventListener('alpine:init', () => {
                 this.sort_title_asc = true;
                 this.bookmarks.sort((a, b) => a.title.localeCompare(b.title));
             }
+            this.loading = false;
         },
         async sortCreated(order = 'asc') {
+            this.loading = true;
             this.sort_created_asc = false;
             this.sort_created_desc = false;
             this.sort_title_asc = false;
@@ -141,6 +144,7 @@ document.addEventListener('alpine:init', () => {
                 this.sort_created_asc = true;
                 this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
             }
+            this.loading = false;
         },
 
         async toggleTagPage() {
diff --git a/src/digimarks/templates/user_index.html b/src/digimarks/templates/user_index.html
index 21de663..fbba9da 100644
--- a/src/digimarks/templates/user_index.html
+++ b/src/digimarks/templates/user_index.html
@@ -22,7 +22,7 @@
                         <button @click="$store.digimarks.loopToNextTheme()" class="theme-toggle">theme</button>
                     </li>
                     <li><input x-model="$store.digimarks.search" placeholder="Search..."></li>
-                    <li x-show="$store.digimarks.loading">&orarr;</li>
+                    <li x-show="$store.digimarks.loading"><i class="fa-solid fa-rotate-right fa-spin"></i></li>
                 </ul>
             </nav>
         </header>