add spinner during loading

core/static/core/style.scss

@@ -617,7 +617,7 @@ a:not(.button) {
 
 
 .select2 {
-  margin: 0;
+  margin: 10px 0!important;
   max-width: 100%;
   min-width: 100%;
 

sas/static/sas/css/picture.scss

@@ -140,6 +140,11 @@
         width: 100%;
         justify-content: space-between;
 
+        &.loader {
+          margin-top: 10px;
+          --loading-size: 20px
+        }
+
         @media (max-width: 1000px) {
           max-width: calc(50% - 5px);
         }

sas/static/sas/js/relation.js

@@ -4,6 +4,7 @@ document.addEventListener("alpine:init", () => {
     selector: undefined,
 
     async init() {
+      this.loading = true;
       this.identifications = await (
         await fetch(`/api/sas/picture/${picture_id}/identified`)
       ).json();
@@ -15,9 +16,11 @@ document.addEventListener("alpine:init", () => {
         }),
         picture_getter: (user) => user.profile_pict,
       });
+      this.loading = false;
     },
 
     async submit_identification() {
+      this.loading = true;
       const url = `/api/sas/picture/${picture_id}/identified`;
       await fetch(url, {
         method: "PUT",
@@ -26,6 +29,7 @@ document.addEventListener("alpine:init", () => {
       // refresh the identified users list
       this.identifications = await (await fetch(url)).json();
       this.selector.empty().trigger("change");
+      this.loading = false;
     },
 
     can_be_removed(item) {
@@ -33,6 +37,7 @@ document.addEventListener("alpine:init", () => {
     },
 
     async remove(item) {
+      this.loading = true;
       const res = await fetch(`/api/sas/relation/${item.id}`, {
         method: "DELETE",
       });
@@ -41,6 +46,7 @@ document.addEventListener("alpine:init", () => {
           (i) => i.id !== item.id,
         );
       }
+      this.loading = false;
     },
   }));
 });

sas/templates/sas/picture.jinja

@@ -128,14 +128,14 @@
         </div>
       </div>
 
-      <div class="tags" x-data="user_identification" x-cloak>
+      <div class="tags" x-data="user_identification">
         <h5>{% trans %}People{% endtrans %}</h5>
         {% if user.was_subscribed %}
-          <form @submit.prevent="submit_identification" >
-          {% csrf_token %}
-          <select x-ref="search" multiple="multiple"></select>
-          <input type="submit" value="{% trans %}Go{% endtrans %}"/>
-        </form>{% endif %}
+          <form @submit.prevent="submit_identification" x-show="!!selector">
+            <select x-ref="search" multiple="multiple"></select>
+            <input type="submit" value="{% trans %}Go{% endtrans %}"/>
+          </form>
+        {% endif %}
         <ul>
           <template x-for="identification in identifications" :key="identification.id">
             <li>
@@ -148,6 +148,9 @@
               </template>
             </li>
           </template>
+          <template x-if="loading">
+            <li class="loader" aria-busy="true"></li>
+          </template>
         </ul>
       </div>
     </div>