disable and hide csv import button when request in flight

package.json

@@ -4,6 +4,7 @@
   "main": "dist/index.js",
   "dependencies": {
     "@fastify/autoload": "^5.8.0",
+    "@fastify/compress": "^7.0.3",
     "@fastify/cookie": "^9.2.0",
     "@fastify/env": "^4.2.0",
     "@fastify/formbody": "^7.4.0",
@@ -34,8 +35,8 @@
   "devDependencies": {
     "@medic/eslint-config": "^1.1.0",
     "@types/chai": "^4.3.11",
-    "@types/commander": "^2.12.2",
     "@types/chai-as-promised": "^7.1.8",
+    "@types/commander": "^2.12.2",
     "@types/mocha": "^10.0.6",
     "@types/rewire": "^2.5.30",
     "@types/sinon": "^17.0.2",

src/liquid/app/fragment_home.html

@@ -8,6 +8,6 @@
     hx-trigger="sse:place_state_change"
   >
     {% include "place/directive.html" %}
-    {% include "place/list.html" %}  
+    {% include "place/list_lazy.html" %}  
   </div>
 </div>

src/liquid/components/button_upload.html

@@ -1,3 +1,3 @@
-<a class="{{ include.className | default: "button is-primary" }}" hx-post="/app/apply-changes" hx-swap="none">
+<a class="{{ include.className | default: "button is-primary" }}" hx-post="/app/apply-changes" hx-target="div#hero_directive_model" hx-swap="innerHTML">
   <span class="material-symbols-outlined">group_add</span> Upload
 </a>

src/liquid/components/table_header.html

@@ -0,0 +1,22 @@
+<thead>
+    <tr>
+        {% for hierarchy in contactType.hierarchy %}
+            <th id="hierarchy_{{ hierarchy.property_name }}">{{ hierarchy.friendly_name }}</th>
+        {% endfor %}
+        {% for property in contactType.place_properties %}
+            {% if property.type != 'generated' %}
+            <th id="place_{{property.property_name}}">{{property.friendly_name}}</th>
+            {% endif %}
+        {% endfor %}
+        {% for contact_property in contactType.contact_properties %}
+            {% if contact_property.type != 'generated' %}
+            <th id="contact_{{contact_property.property_name}}">{{contact_property.friendly_name}}</th>
+            {% endif %}
+        {% endfor %}
+        {% if contactType.user_role.size > 1 %}
+            <th id="{{userRoleProperty.property_name}}">{{ contactType.userRoleProperty.friendly_name }}</th>
+        {% endif %}
+        <th></th>
+        <th></th>
+    </tr>
+</thead>

src/liquid/place/bulk_create_form.html

@@ -4,8 +4,9 @@
     hx-encoding='multipart/form-data' 
     autocomplete="off"
     hx-post="/place?op=bulk&type={{contactType.name}}"
-    hx-target="this" 
-    hx-swap="outerHTML"
+    hx-disabled-elt="button#place_create_submit"
+    hx-indicator="#place_create_submit_progress"
+    hx-swap="none"
   >
       <input name="place_type" value="{{contactType.name}}" hidden />
 
@@ -39,6 +40,9 @@
             <a href="/" id="cancel" class="button">Cancel</a>
         </div>
       </div>
+      <div>
+        <progress id="place_create_submit_progress" class="progress is-small is-primary htmx-indicator" max="100"></progress>
+      </div>
 
       <div class="tile box">
         <table class="table is-fullwidth is-striped is-hoverable">

src/liquid/place/directive.html

@@ -1,7 +1,7 @@
 <div class="columns is-3 is-variable is-multiline" id="directive" hx-swap-oob="true">
   <div class="column has-background-light is-9">
     <section class="hero is-small is-light">
-      <div class="hero-body">
+      <div class="hero-body" id="hero_directive_model">
         {% if directiveModel.inProgressCount > 0 %}
           {% include "place/directive_3_in_progress.html" %}
         {% elsif directiveModel.stagedCount > 0 %}

src/liquid/place/directive_2_prompt_upload.html

@@ -8,7 +8,7 @@
 
 <div class="columns is-centered">
   <div class="column is-4 has-text-centered">
-    <a class="button is-primary" data-target="progress-modal" hx-post="/app/apply-changes" hx-swap="none">
+    <a class="button is-primary" data-target="progress-modal" hx-target="div#hero_directive_model" hx-swap="innerHTML" hx-post="/app/apply-changes">
       <span class="material-symbols-outlined">group_add</span> Upload
     </a>
   </div>

src/liquid/place/list.html

@@ -7,28 +7,7 @@ <h2 class="title is-4">{{contactType.friendly}}</h2>
         id="table_places"
         class="table is-fullwidth is-striped is-hoverable"
       >
-        <thead>
-          <tr>
-            {% for hierarchy in contactType.hierarchy %}
-              <th id="hierarchy_{{ hierarchy.property_name }}">{{ hierarchy.friendly_name }}</th>
-            {% endfor %}
-            {% for property in contactType.place_properties %}
-              {% if property.type != 'generated' %}
-                <th id="place_{{property.property_name}}">{{property.friendly_name}}</th>
-              {% endif %}
-            {% endfor %}
-            {% for contact_property in contactType.contact_properties %}
-              {% if contact_property.type != 'generated' %}
-                <th id="contact_{{contact_property.property_name}}">{{contact_property.friendly_name}}</th>
-              {% endif %}
-            {% endfor %}
-            {% if contactType.user_role.size > 1 %}
-              <th id="{{userRoleProperty.property_name}}">{{ contactType.userRoleProperty.friendly_name }}</th>
-            {% endif %}
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
+        {% include "components/table_header.html" contactType=contactType %}
         <tbody>
           {% for place in contactType.places %}
           <tr>

src/liquid/place/list_lazy.html

@@ -0,0 +1,15 @@
+<div id="place_list" hx-trigger="load" hx-get="/app/list" hx-target="this" hx-swap="outerHTML">
+  {% for contactType in contactTypes %}
+  <div id="{{contactType.name}}" class="mb-6">
+    <h2 class="title is-4">{{contactType.friendly}}</h2>
+    <div>
+      <table id="table_places" class="table is-fullwidth is-striped is-hoverable">
+        {% include "components/table_header.html" contactType=contactType %}
+      </table>
+      <div class="container p-6 is-flex is-justify-content-center is-align-content-center">
+        <img src="/public/spinner.gif" alt="Loading data" />
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>

src/routes/add-place.ts

@@ -74,9 +74,7 @@ export default async function addPlace(fastify: FastifyInstance) {
           },
         });
       }
-
-      // back to places list
-      resp.header('HX-Redirect', `/`);
+      resp.header('HX-Redirect', '/');
       return;
     }