From 3a48f201ee16c7811be954656f62feb6e58efc44 Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Thu, 5 Jan 2023 11:32:58 +0100
Subject: [PATCH] style(autosave/conditional): new a11y spinner proposition

---
 app/assets/stylesheets/forms.scss             |  5 ++++
 app/assets/stylesheets/spinner.scss           | 24 ++++++++++++++++++-
 .../controllers/autosave_controller.ts        | 11 ++++++---
 .../users/dossiers/update.turbo_stream.haml   |  2 +-
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index 01fc7f64f..afd67afc6 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -180,6 +180,11 @@
     &.no-margin {
       margin-bottom: 0;
     }
+
+    + .spinner {
+      position: relative;
+      top: -($default-fields-spacer / 2);
+    }
   }
 
 
diff --git a/app/assets/stylesheets/spinner.scss b/app/assets/stylesheets/spinner.scss
index 2c1a3c460..33fa4fe39 100644
--- a/app/assets/stylesheets/spinner.scss
+++ b/app/assets/stylesheets/spinner.scss
@@ -1,6 +1,6 @@
 @import "colors";
 
-.spinner {
+.spinner-old {
   color: $black;
   width: 1em;
   height: 1em;
@@ -58,3 +58,25 @@
     box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
   }
 }
+
+
+.spinner {
+  /* Add a loading spinner using the `::before` pseudo-element */
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 3px solid var(--text-default-grey);
+    border-radius: 50%;
+    border-top-color: var(--background-default-grey);
+    animation: spinner 0.7s cubic-bezier(0,0,.36,.78) infinite;
+  }
+}
+
+/* Add the keyframes for the spinner animation */
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/app/javascript/controllers/autosave_controller.ts b/app/javascript/controllers/autosave_controller.ts
index 415fb38da..2330c5b0b 100644
--- a/app/javascript/controllers/autosave_controller.ts
+++ b/app/javascript/controllers/autosave_controller.ts
@@ -103,9 +103,14 @@ export class AutosaveController extends ApplicationController {
       this.debounce(this.enqueueAutosaveRequest, AUTOSAVE_DEBOUNCE_DELAY);
 
       if (target.dataset.dependentConditions) {
-        const spinner = document.createElement('div');
-        spinner.classList.add('spinner', 'right');
-        target.after(spinner);
+        // do not do anything is next DOM element has class "new-laoder"
+        if (!target.nextElementSibling?.classList.contains('spinner')) {
+          const spinner = document.createElement('div');
+          spinner.classList.add('spinner');
+          spinner.setAttribute('aria-live', 'live');
+          spinner.setAttribute('aria-label', 'Chargement en cours…');
+          target.after(spinner);
+        }
       }
     }
   }
diff --git a/app/views/users/dossiers/update.turbo_stream.haml b/app/views/users/dossiers/update.turbo_stream.haml
index ddf5a21cb..c2f60b4a4 100644
--- a/app/views/users/dossiers/update.turbo_stream.haml
+++ b/app/views/users/dossiers/update.turbo_stream.haml
@@ -7,4 +7,4 @@
     = turbo_stream.morph champ.input_group_id do
       = render EditableChamp::EditableChampComponent.new champ:, form:
 
-= turbo_stream.remove_all(".editable-champ .spinner")
+= turbo_stream.remove_all(".editable-champ .spinner");