display loading when reloading

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
+      <button class="button is-primary" v-if="needRefresh" @click="reload">
-        class="button is-primary"
+        <LiteLoading v-if="isLoading" />
-        v-if="needRefresh"
+        <span v-else>Reload</span>
-        @click="updateServiceWorker()"
-      >
-        Reload
       </button>
       <button class="button" @click="close">Close</button>
     </div>