feat: more changes and fixes

app/templates/transactions/fragments/list_all.html

@@ -1,13 +1,12 @@
 {% load natural %}
 {% load i18n %}
-
 {% regroup page_obj by date|customnaturaldate as transactions_by_date %}
 
-<div id="transactions-list">
+<div id="transactions-list" class="show-loading">
   {% for x in transactions_by_date %}
     <div id="{{ x.grouper|slugify }}" class="transactions-divider"
          _="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
-      <div class="mt-3 mb-1 w-full text-base border-b border-base-300 bg-base-100 transactions-divider-title">
+      <div class="mt-3 mb-1 w-full border-b border-b-base-content/30 transactions-divider-title cursor-pointer">
         <a class="no-underline inline-block w-full"
            role="button"
            data-bs-toggle="collapse"
@@ -18,7 +17,7 @@
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse transactions-divider-collapse overflow-visible isolation-auto" id="c-{{ x.grouper|slugify }}-collapse"
+      <div class="bs collapse transactions-divider-collapse overflow-visible isolation-auto" id="c-{{ x.grouper|slugify }}-collapse"
            _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
               on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
               on htmx:afterSettle from #transactions or toggle
@@ -41,14 +40,18 @@
         </div>
       </div>
     </div>
+
   {% empty %}
     <c-msg.empty
         title="{% translate "No transactions found" %}"
         subtitle="{% translate "Try adding one" %}"></c-msg.empty>
   {% endfor %}
 
+  {# Floating bar #}
+  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
+
   {% if page_obj.has_other_pages %}
-    <div class="mt-auto">
+    <div class="my-3">
       <input value="{{ page_obj.number }}" name="page" type="hidden" id="page">
 
       <nav aria-label="{% translate 'Page navigation' %}">
@@ -86,7 +89,8 @@
                      hx-vals='{"page": {{ page_number }}}'
                      hx-include="#filter, #order"
                      hx-target="#transactions-list"
-                     hx-swap="show:top">
+                     hx-swap="outerHTML show:top"
+                     hx-indicator="#transactions-list">
                     {{ page_number }}
                   </a>
                 </li>
@@ -102,10 +106,12 @@
             </li>
             <li>
               <a class="join-item btn btn-sm"
-                 hx-get="{% url 'transactions_all_list' %}" hx-target="#transactions-list"
+                 hx-get="{% url 'transactions_all_list' %}"
+                 hx-target="#transactions-list"
                  hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
                  hx-include="#filter, #order"
-                 hx-swap="show:top"
+                 hx-swap="outerHTML show:top"
+                 hx-indicator="#transactions-list"
                  aria-label="Última página">
                 <span aria-hidden="true">{{ page_obj.paginator.num_pages }}</span>
               </a>
@@ -116,8 +122,9 @@
                hx-get="{% if page_obj.has_next %}{% url 'transactions_all_list' %}{% endif %}"
                hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
                hx-include="#filter, #order"
-               hx-swap="show:top"
+               hx-swap="outerHTML show:top"
                hx-target="#transactions-list"
+               hx-indicator="#transactions-list"
                aria-label="Next">
               <span aria-hidden="true">&raquo;</span>
             </a>
@@ -126,7 +133,4 @@
       </nav>
     </div>
   {% endif %}
-  {#  Floating bar#}
-  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
-
 </div>