From d545becf24abc76b6e90ce3263c7557662375db0 Mon Sep 17 00:00:00 2001
From: thomas girod <thgirod@hotmail.com>
Date: Fri, 9 Aug 2024 17:06:35 +0200
Subject: [PATCH] add spinner during loading

---
 core/static/core/style.scss     |  2 +-
 sas/static/sas/css/picture.scss |  5 +++++
 sas/static/sas/js/relation.js   |  6 ++++++
 sas/templates/sas/picture.jinja | 15 +++++++++------
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 846650d7..8fbc665e 100644
--- a/core/static/core/style.scss
+++ b/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%;
 
diff --git a/sas/static/sas/css/picture.scss b/sas/static/sas/css/picture.scss
index a466d031..2ceb0d83 100644
--- a/sas/static/sas/css/picture.scss
+++ b/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);
         }
diff --git a/sas/static/sas/js/relation.js b/sas/static/sas/js/relation.js
index 366b2219..0549aeaf 100644
--- a/sas/static/sas/js/relation.js
+++ b/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;
     },
   }));
 });
diff --git a/sas/templates/sas/picture.jinja b/sas/templates/sas/picture.jinja
index 20bb37b3..f41f0564 100644
--- a/sas/templates/sas/picture.jinja
+++ b/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>