style(autosave/conditional): new a11y spinner proposition

app/assets/stylesheets/forms.scss

@@ -180,6 +180,11 @@
     &.no-margin {
       margin-bottom: 0;
     }
+
+    + .spinner {
+      position: relative;
+      top: -($default-fields-spacer / 2);
+    }
   }
 
 

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);
+  }
+}

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);
+        }
       }
     }
   }

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");