From bd4cfc1edaa426d469eead390c123b45e16bc273 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 20 Jul 2023 12:51:08 +0200
Subject: [PATCH] display loading when reloading

---
 src/components/NewVersion.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/NewVersion.vue b/src/components/NewVersion.vue
index 5b8b963..39e547c 100644
--- a/src/components/NewVersion.vue
+++ b/src/components/NewVersion.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import LiteLoading from '@/components/LiteLoading.vue'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 import { ref } from 'vue'
 
 const devMode = ref(import.meta.env.DEV)
+const isLoading = ref(false)
 const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
 
 const close = async () => {
@@ -10,6 +12,11 @@ const close = async () => {
   needRefresh.value = false
   devMode.value = false
 }
+
+const reload = () => {
+  isLoading.value = true
+  updateServiceWorker()
+}
 </script>
 
 <template>
@@ -25,12 +32,9 @@ const close = async () => {
       </span>
     </div>
     <div class="buttons">
-      <button
-        class="button is-primary"
-        v-if="needRefresh"
-        @click="updateServiceWorker()"
-      >
-        Reload
+      <button class="button is-primary" v-if="needRefresh" @click="reload">
+        <LiteLoading v-if="isLoading" />
+        <span v-else>Reload</span>
       </button>
       <button class="button" @click="close">Close</button>
     </div>