Display a spinner when the extinction is in progress

ui/src/routes/+page.svelte

@@ -2,6 +2,7 @@
  import {
      Container,
      Icon,
+     Spinner,
  } from 'sveltestrap';
 
  import CycleCounter from '$lib/components/CycleCounter.svelte';
@@ -20,6 +21,11 @@
  }
  function reloadIsActiveAlarm() {
      isActiveP = isAlarmActive();
+     isActiveP.then((isActive) => {
+         if (!isActive) {
+             extinctionInProgress = false;
+         }
+     })
      return isActiveP;
  }
 
@@ -28,6 +34,7 @@
  }
 
  function stopAlarm() {
+     extinctionInProgress = true;
      alarmStop();
      reloadIsActiveAlarm().then((isActive) => {
          if (isActive) {
@@ -35,6 +42,8 @@
          }
      })
  }
+
+ let extinctionInProgress = false;
 </script>
 
 <Container class="flex-fill d-flex flex-column justify-content-center text-center">
@@ -125,7 +134,11 @@
                     class="btn btn-danger"
                     on:click={stopAlarm}
                 >
-                    <Icon name="stop-circle" />
+                    {#if extinctionInProgress}
+                        <Spinner size="sm" />
+                    {:else}
+                        <Icon name="stop-circle" />
+                    {/if}
                     Éteindre le réveil
                 </button>
                 <button class="btn btn-outline-info">