style(spinner): replace legacy spinner

app/assets/stylesheets/forms.scss

@@ -181,7 +181,7 @@
       margin-bottom: 0;
     }
 
-    + .spinner {
+    + .spinner:not(.right):not(.left) {
       position: relative;
       top: -($default-fields-spacer / 2);
     }

app/assets/stylesheets/spinner.scss

@@ -1,67 +1,6 @@
-@import "colors";
-
-.spinner-old {
-  color: $black;
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  position: relative;
-  text-indent: -9999em;
-  animation: load4 1.3s infinite linear;
-  transform: translateZ(0);
-
-  &.right {
-    position: absolute;
-    top: 3.7em;
-    right: 1.2em;
-    transform: scale(0.3);
-  }
-
-  &.left {
-    top: 1.2em;
-    left: 1.2em;
-    transform: scale(0.4);
-  }
-}
-
-@keyframes load4 {
-  0%,
-  100% {
-    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
-  }
-
-  12.5% {
-    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-
-  25% {
-    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
-  }
-
-  37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-
-  50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
-  }
-
-  62.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
-  }
-
-  75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
-  }
-
-  87.5% {
-    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 */
+  vertical-align: middle;
+
   &::before {
     content: "";
     display: inline-block;
@@ -70,12 +9,23 @@
     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;
+    animation: spin 0.7s cubic-bezier(0, 0, 0.36, 0.78) infinite;
+  }
+
+  &.right {
+    position: absolute;
+    top: 3.7em;
+    right: 1.2em;
+  }
+
+  &.left {
+    top: 1.2em;
+    left: 1.2em;
   }
 }
 
-/* Add the keyframes for the spinner animation */
+// Add the keyframes for the spinner animation
-@keyframes spinner {
+@keyframes spin {
   to {
     transform: rotate(360deg);
   }

app/views/administrateurs/procedures/administrateurs.html.haml

@@ -14,7 +14,7 @@
     %table#all-admins
       %caption
         = "#{@admins.total_count} administrateurs"
-        %span.hidden.fr-icon-ball-pen-fill{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
+        %span.hidden.spinner{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
       - if @filter.email
         .selected-email.fr-mb-2w
           = link_to @filter.email, administrateurs_admin_procedures_path(@filter.without(:email)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'

app/views/administrateurs/procedures/all.html.haml

@@ -16,7 +16,7 @@
     %table#all-demarches
       %caption
         = "#{@procedures.total_count} démarches"
-        %span.hidden.fr-icon-ball-pen-fill{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
+        %span.hidden.spinner{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
       - if @filter.libelle
         .selected-query.fr-mb-2w
           = link_to @filter.libelle, all_admin_procedures_path(@filter.without(:libelle)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'