Display a spinner while cutout images are loading

scimma · Oct 18, 2024 · 1bc9aac · 1bc9aac
1 parent 75097ce
commit 1bc9aac
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/app/host/plotting_utils.py b/app/host/plotting_utils.py
@@ -24,6 +24,7 @@
 from host.models import Filter
 from host.photometric_calibration import maggies_to_mJy
 from host.prospector import build_obs
+from bokeh.models import CustomJS
 
 # import extinction
 # from bokeh.models import Circle
@@ -214,6 +215,10 @@ def plot_cutout_image(
         fig.xgrid.visible = False
         fig.ygrid.visible = False
 
+    hide_loading_indicator = CustomJS(args=dict(), code="""
+        document.getElementById('loading-indicator').style.display = "none";
+    """)
+    fig.x_range.js_on_change('end', hide_loading_indicator)
     plot_image(image_data, fig)
 
     script, div = components(fig)

diff --git a/app/host/templates/host/base.html b/app/host/templates/host/base.html
@@ -70,6 +70,22 @@
   .form-control.is-valid, .form-control:focus {
     border-color:#d15e00;
   }
+  .loader {
+    border: 12px solid #f3f3f3;
+    border-top: 12px solid #d15e00;
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    margin: 2rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
   </style>
   {% load static %}
   {% include 'latexify/stylesheets.html' %}

diff --git a/app/host/templates/host/cutout_card.html b/app/host/templates/host/cutout_card.html
@@ -7,6 +7,7 @@
 
 <!-- body -->
 {% block body %}
+<div id="loading-indicator" class="loader"></div>
 {{ bokeh_cutout_div | safe }}
 <form class="form" , method="POST">
     {% csrf_token %}