Refactor button to add a manual zone

- do not show the button if a zone is selected (to avoid to create two selected zones on the document);
- change the button while waiting for the user to create a new zone: this make visible the fact that the app is waiting for a user action

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue

@@ -96,12 +96,17 @@
         >
           {{ $t("cancel") }}
         </button>
-        <button
+        <button v-if="userSignatureZone === null"
-          class="btn btn-create btn-sm"
+          :class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }"
-          :class="{ active: canvasEvent === 'add' }"
           @click="toggleAddZone()"
           :title="$t('add_sign_zone')"
-        ></button>
+        >
+            <template v-if="canvasEvent === 'add'">
+                <div class="spinner-border spinner-border-sm" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </template>
+        </button>
       </div>
     </div>
 
@@ -195,13 +200,20 @@
         >
           {{ $t("cancel") }}
         </button>
-        <button
+        <button v-if="userSignatureZone === null"
-          class="btn btn-create btn-sm"
+          :class="{ btn: true, 'btn-sm': true, 'btn-create': canvasEvent !== 'add', 'btn-chill-green': canvasEvent === 'add', active: canvasEvent === 'add' }"
-          :class="{ active: canvasEvent === 'add' }"
           @click="toggleAddZone()"
           :title="$t('add_sign_zone')"
         >
-          {{ $t("add_zone") }}
+            <template v-if="canvasEvent !== 'add'">
+                {{ $t("add_zone") }}
+            </template>
+            <template v-else>
+              {{ $t("click_on_document")}}
+              <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </template>
         </button>
       </div>
     </div>

src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/index.ts

@@ -15,6 +15,7 @@ const appMessages = {
         last_sign_zone: 'Zone de signature précédente',
         next_sign_zone: 'Zone de signature suivante',
         add_sign_zone: 'Ajouter une zone de signature',
+        click_on_document: 'Cliquer sur le document',
         last_zone: 'Zone précédente',
         next_zone: 'Zone suivante',
         add_zone: 'Ajouter une zone',