From 0f9af99b948bd0e43dbbf759df32362e3a3165b4 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sat, 15 Oct 2022 14:21:26 +0200
Subject: [PATCH] Display a spinner when the extinction is in progress

---
 ui/src/routes/+page.svelte | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index eae2a33..ae0b083 100644
--- a/ui/src/routes/+page.svelte
+++ b/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">