From 0e5de89e81c388e6bd65c8eb12bc559255675221 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 11 Apr 2024 17:57:24 +1000
Subject: [PATCH] Change sidebar link behaviour so it doesnt scroll to top of
 screen until content has loaded and add in loading spinner for person list in
 sidebar

---
 templates/base.html                 | 23 +++++++++++++++++++----
 templates/partials/people_link.html |  3 ++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 5d5172c..d4efbf7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -69,7 +69,8 @@
                         <div class="space-y-2 pt-2">
                             <a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
                                 class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }} page-link"
-                                _="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
+                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
+                                   on htmx:afterRequest go to the top of the body">
                                 <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                     fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
@@ -78,13 +79,27 @@
                                 <span class="ml-3">Dashboard</span>
                             </a>
                         </div>
-                        <ul class="space-y-2 pb-2" hx-get="{{ url_for('get_person_list') }}"
-                            hx-trigger="load, updatedPeople from:body">
+                        <ul class="space-y-2 pb-2 relative" hx-get="{{ url_for('get_person_list') }}"
+                            hx-trigger="load, updatedPeople from:body" hx-indicator="#person_loader">
+
+                            <!-- Overlay with Animated Spinner -->
+                            <div id="person_loader"
+                                class="loading-indicator inset-0 flex justify-center items-center opacity-35 p-4">
+                                <svg class="animate-spin h-16 w-16 text-white opacity-100"
+                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+                                    <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10"
+                                        stroke-linecap="round" class="opacity-20"></circle>
+                                    <path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
+                                        stroke-linecap="round" class="opacity-75"></path>
+                                </svg>
+                            </div>
+
                         </ul>
                         <div class="space-y-2 pt-2">
                             <a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container"
                                 class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }} page-link"
-                                _="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
+                                _="on click add .hidden to #sidebar then remove .ml-64 from #main
+                                   on htmx:afterRequest go to the top of the body">
                                 <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                     fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                                     data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;">
diff --git a/templates/partials/people_link.html b/templates/partials/people_link.html
index 8524c8c..44a16b9 100644
--- a/templates/partials/people_link.html
+++ b/templates/partials/people_link.html
@@ -2,7 +2,8 @@
 <li>
     <a hx-get="{{ url_for('get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true" hx-target="#container"
         class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group cursor-pointer page-link"
-        _="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
+        _="on click add .hidden to #sidebar then remove .ml-64 from #main
+           on htmx:afterRequest go to the top of the body">
         <svg class="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
             fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd">