add loading indicatior when importitng cases

atlas/templates/atlas/user_uploads.html

@@ -6,7 +6,7 @@
     <a href="{% url 'atlas:new_uploads' %}">Upload more dicoms</a><br/>
     {% if not case %}
         <div class="alert alert-info" role="alert">
-            Series imported from here will be orphaned (not associated with a case). It is usually better to create a case first and then import directly into the case.
+            Series imported from here will be orphaned (not associated with a case). <br/>It is usually better to <a href="{% url 'atlas:case_create' %}">create a case</a> first and then import directly into the case.
         </div>
     {% endif %}
 
@@ -42,7 +42,7 @@
                     <div>
                 <fieldset><legend>Select how series should be ordered when uploaded</legend>
                         <div class="helptext">
-                            This will affect how series are displayed when viewing with the built in site viewer. By default when exporting from Insight the order is not maintained so you should choose to order eithre by slice location or instance number.<br/>
+                            This will affect how series are displayed when viewing with the built in site viewer. By default when exporting from Insight the order is not maintained so you should choose to order either by slice location or instance number.<br/>
                             If you are not sure, leave this as the default.
                         </div>
                         <div>
@@ -72,6 +72,7 @@
             <button id="import-dicoms-case-button"
                     hx-post="{% url 'api-1:import_dicoms_case' case.id %}"
                     hx-target=".imported"
+                    hx-indicator=".indicator"
                     hx-include=".selected,[name='order-series']"
             >Import into case</button>
 
@@ -79,9 +80,11 @@
             <button id="import-dicoms-button"
                     hx-post="{% url 'api-1:import_dicoms' %}"
                     hx-target=".imported"
+                    hx-indicator=".indicator"
                     hx-include=".selected,[name='order-series']"
             >Import</button>
         {% endif %}
+        <div class="indicator"><div class="loader"></div>Loading...</div>
 
         <div class="imported">
 
@@ -98,6 +101,42 @@
 
 {% block css %}
 <style>
+.indicator {
+  display: none;
+}
+
+.indicator.htmx-request {
+  display: block;
+}
+
+.loader {
+  width: 50px;
+  aspect-ratio: 1;
+  display: grid;
+}
+.loader::before,
+.loader::after {    
+  content:"";
+  grid-area: 1/1;
+  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
+  background: 
+    var(--c) 50%  0, 
+    var(--c) 50%  100%, 
+    var(--c) 100% 50%, 
+    var(--c) 0    50%;
+  background-size: 12px 12px;
+  animation: l12 1s infinite;
+}
+.loader::before {
+  margin: 4px;
+  filter: hue-rotate(45deg);
+  background-size: 8px 8px;
+  animation-timing-function: linear
+}
+
+@keyframes l12 { 
+  100%{transform: rotate(.5turn)}
+}
 
 #series-list {
   user-select: none;