From aacc6109261f39b560e838e9b6201ef3e211fc02 Mon Sep 17 00:00:00 2001
From: Manuel Gugger <manuel.gugger@gmail.com>
Date: Thu, 6 Oct 2022 15:08:00 +0200
Subject: [PATCH] add loading animation

---
 templates/base.html           | 19 +++++++++++++++++++
 templates/create_or_edit.html |  4 ++--
 templates/list.html           |  4 ++--
 3 files changed, 23 insertions(+), 4 deletions(-)
diff --git a/templates/base.html b/templates/base.html
index 0ae02f6..3e14e8b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -49,9 +49,28 @@
 
         });
     </script>
+
+    <style>
+        .loader-wrapper {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            /*background: rgba(120,120,120,.2);*/
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 5;
+            pointer-events: none 
+        }
+    </style>
 </head>
 
 <body>
+    <div id="loading" class="loader-wrapper htmx-indicator">
+        <div class="loader is-size-1"></div>
+    </div>
     {% include "header.html" %}
     <div class="container is-fluid">
         {% block content %}
diff --git a/templates/create_or_edit.html b/templates/create_or_edit.html
index 4e647a9..c7d46a9 100644
--- a/templates/create_or_edit.html
+++ b/templates/create_or_edit.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<form method="post" enctype="multipart/form-data">
+<form hx-boost="true" hx-indicator="#loading" hx-encoding="multipart/form-data" method="post" enctype="multipart/form-data">
     {% for model_field in view_model.fields -%}
     <div class="field">
         <label class="{{ model_field | get_html_input_type }}" for="{{ model_field.field_name }}">
@@ -26,7 +26,7 @@
     {%- endfor %}
     <div class="field is-grouped">
         <div class="control">
-            <button class="button is-link" type="submit">Save</button>
+            <button class="button is-link" type="submit">Save</i></button>
         </div>
         <div class="control">
             <a class="button is-link is-light" href="{{ list_link }}">Cancel</a>
diff --git a/templates/list.html b/templates/list.html
index b22879d..edf70cd 100644
--- a/templates/list.html
+++ b/templates/list.html
@@ -35,7 +35,7 @@
                     placeholder="Search"
                     hx-get="/admin/{{ entity_name }}/list?render_partial=true&entities_per_page={{ entities_per_page }}&page={{ page }}"
                     hx-trigger="keyup changed delay:500ms, search" hx-target="#{{ entity_name }}table"
-                    hx-indicator=".htmx-indicator">
+                    hx-indicator="#loading">
                 <span class="icon is-small is-left">
                     <i class="fas fa-search"></i>
                 </span>
@@ -66,7 +66,7 @@
 
 <div id="{{ entity_name }}table">
     <form id="checked-rows">
-        <table class="table is-fullwidth is-hoverable">
+        <table class="table is-fullwidth is-hoverable is-striped">
             <thead>
                 <tr>
                     <th>
