add a spinner while updating the chart

DataShades · Jun 18, 2024 · 4288961 · 4288961
1 parent f37d02b
commit 4288961
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 3 deletions.
diff --git a/ckanext/charts/assets/css/charts.css b/ckanext/charts/assets/css/charts.css
diff --git a/ckanext/charts/templates/charts/snippets/chart_create_form.html b/ckanext/charts/templates/charts/snippets/chart_create_form.html
@@ -18,4 +18,11 @@
     user_chart_builder=user_chart_builder or false %}
 </div>
 
-<div class="charts-view--preview" id="charts-view--preview" style="min-height: 450px;"></div>
+<div id="chart-indicator">
+    {% snippet "charts/snippets/svg/loader.svg" %}
+    {{ _("Updating chart...") }}
+</div>
+
+<div class="charts-view--preview" id="charts-view--preview" style="min-height: 450px;">
+
+</div>
diff --git a/ckanext/charts/templates/charts/snippets/charts_form_fields.html b/ckanext/charts/templates/charts/snippets/charts_form_fields.html
@@ -32,7 +32,7 @@
 
     <div class="tab-content" id="pills-tabContent"
         hx-get="{{ h.url_for('charts_view.update_chart', resource_id=resource_id) }}" hx-trigger="load, submit, change"
-        hx-include="closest form" hx-target="#charts-view--preview">
+        hx-include="closest form" hx-target="#charts-view--preview" hx-indicator="#chart-indicator">
 
         {% for tab in form_tabs %}
             {% set tab_fields = builder.get_fields_by_tab(tab) %}

diff --git a/ckanext/charts/templates/charts/snippets/svg/loader.svg b/ckanext/charts/templates/charts/snippets/svg/loader.svg
diff --git a/ckanext/charts/theme/charts.scss b/ckanext/charts/theme/charts.scss
@@ -35,6 +35,14 @@
     .tab-content {
         display: block;
     }
+
+    #chart-indicator {
+        display: none;
+    }
+
+    .htmx-request#chart-indicator{
+        display:inline;
+    }
 }
 
 .charts-filters {