Merge branch 'add-siter-champ-spinner' into dev

app/assets/javascripts/new_design/champs/siret.js

@@ -9,12 +9,15 @@ document.addEventListener('turbolinks:load', function() {
       break;
     case 14:
       input.attr('disabled', 'disabled');
+      $('.spinner').show();
       $.get(url+'?siret='+value).then(function() {
         input.removeAttr('data-invalid');
         input.removeAttr('disabled');
+        $('.spinner').hide();
       }, function() {
         input.removeAttr('disabled');
         input.attr('data-invalid', true);
+        $('.spinner').hide();
       });
       break;
     default:

app/assets/stylesheets/new_design/forms.scss

@@ -36,6 +36,8 @@
   }
 
   .editable-champ {
+    position: relative;
+
     .updated-at {
       @include notice-text-style;
       float: right;

app/assets/stylesheets/new_design/spinner.scss

@@ -0,0 +1,55 @@
+@import "colors";
+
+.spinner {
+  color: $black;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: load4 1.3s infinite linear;
+  transform: translateZ(0);
+}
+
+.right-spinner {
+  display: none;
+  position: absolute;
+  bottom: 1.3em;
+  right: 1.2em;
+  transform: scale(0.3);
+}
+
+@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;
+  }
+}

app/views/shared/dossiers/editable_champs/_siret.html.haml

@@ -3,6 +3,7 @@
   class: 'small-margin',
   data: { siret: champs_siret_path(format: :js, champ_id: champ) },
   required: champ.mandatory?
+.spinner.right-spinner
 %div{ id: "etablissement-for-#{champ.id}" }
   - if champ.etablissement.present?
     = render partial: 'shared/dossiers/editable_champs/etablissement_titre', locals: { etablissement: champ.etablissement }