dapp: improve UI while update in progress

When an update is in progress, the new UI gets blocked for the user and
a progress spinner was shown. This disappears after the page reloads. But here
the actual installation actually happens. Having the new persisted information
that an update is in progress this can be lengthened over the reload. The UI
remains remains blocked until the service worker is done with the installation.
The snackbar with the spinner is also active during this time.
Furthermore this fixes the issue that after the latest changes the update is
available message was shown while the update was still being installed.

raiden-dapp/src/components/VersionSnackbar.vue

@@ -4,7 +4,7 @@
     <v-snackbar v-model="showMessage" class="version-snackbar" :timeout="-1" color="primary">
       <v-container class="d-flex align-center py-0">
         <div class="version-snackbar__message">{{ message }}</div>
-        <v-btn class="ml-5" dark text :loading="isUpdating" @click="update">
+        <v-btn class="ml-5" dark text :loading="showProgressSpinner" @click="update">
           {{ $t('update.update') }}
         </v-btn>
       </v-container>
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 /* istanbul ignore file */
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue, Watch } from 'vue-property-decorator';
 import { createNamespacedHelpers, mapState } from 'vuex';
 
 import BlurredOverlay from '@/components/overlays/BlurredOverlay.vue';
@@ -26,7 +26,7 @@ const { mapState: mapVersionInformationState, mapGetters: mapVersionInformationG
   components: { BlurredOverlay },
   computed: {
     ...mapState(['isConnected']),
-    ...mapVersionInformationState(['updateIsMandatory']),
+    ...mapVersionInformationState(['updateIsMandatory', 'updateInProgress']),
     ...mapVersionInformationGetters(['correctVersionIsLoaded', 'updateIsAvailable']),
   },
 })
@@ -35,38 +35,52 @@ export default class VersionSnackbar extends Vue {
   correctVersionIsLoaded!: boolean;
   updateIsMandatory!: boolean;
   updateIsAvailable!: boolean;
-  isUpdating = false;
+  updateInProgress!: boolean;
+  showProgressSpinner = false; // This kicks-in earlier than `updateInProgress` including the shutdown.
 
   get visible(): boolean {
-    return !this.correctVersionIsLoaded || this.updateIsAvailable || this.updateIsMandatory;
+    return (
+      !this.correctVersionIsLoaded ||
+      this.updateIsAvailable ||
+      this.updateIsMandatory ||
+      this.updateInProgress
+    );
   }
 
   get blocking(): boolean {
-    return !this.correctVersionIsLoaded || this.updateIsMandatory;
-  }
-
-  get showMessage(): boolean {
-    return this.correctVersionIsLoaded && (this.updateIsAvailable || this.updateIsMandatory);
+    return !this.correctVersionIsLoaded || this.updateIsMandatory || this.updateInProgress;
   }
 
   get message(): string {
-    if (this.showMessage) {
-      const subKey = this.updateIsMandatory ? 'mandatory' : 'optional';
-      return this.$t(`update.${subKey}`) as string;
+    if (this.updateInProgress) {
+      return this.$t('update.updateInProgress') as string;
+    } else if (this.updateIsMandatory) {
+      return this.$t('update.updateMandatory') as string;
+    } else if (this.updateIsAvailable) {
+      return this.$t('update.updateAvailable') as string;
     } else {
       return '';
     }
   }
 
+  get showMessage(): boolean {
+    return this.message.length > 0;
+  }
+
   async update(): Promise<void> {
-    this.isUpdating = true;
+    this.showProgressSpinner = true;
 
     if (this.isConnected) {
       await this.$raiden.disconnect();
     }
 
     this.$serviceWorkerAssistant.update();
   }
+
+  @Watch('updateInProgress', { immediate: true })
+  onUpdateInProgressChange(): void {
+    this.showProgressSpinner = this.updateInProgress;
+  }
 }
 </script>
 

raiden-dapp/src/locales/en.json

@@ -248,9 +248,10 @@
     "transfer-from-raiden-account": "Transfer ETH from Raiden Account to Main Account"
   },
   "update": {
-    "optional": "A new version is available.",
-    "mandatory": "Something happened to the local cached version. Perhaps the browser storage got cleared. You must update to get the app working again. You will not lose your current state.",
-    "update": "Update"
+    "updateAvailable": "A new version is available.",
+    "updateMandatory": "Something happened to the local cached version. Perhaps the browser storage got cleared. You must update to get the app working again. You will not lose your current state.",
+    "update": "Update",
+    "updateInProgress": "Please wait for the update to finish."
   },
   "address-input": {
     "input": {

raiden-dapp/tests/unit/components/version-snackbar.spec.ts

@@ -23,6 +23,7 @@ function createWrapper(options?: {
   updateIsAvailable?: boolean;
   updateIsMandatory?: boolean;
   correctVersionIsLoaded?: boolean;
+  updateInProgress?: boolean;
 }): Wrapper<VersionSnackbar> {
   const vuetify = new Vuetify();
   const state = {
@@ -33,6 +34,7 @@ function createWrapper(options?: {
     namespaced: true,
     state: {
       updateIsMandatory: options?.updateIsMandatory ?? false,
+      updateInProgress: options?.updateInProgress ?? false,
     },
     getters: {
       updateIsAvailable: () => options?.updateIsAvailable ?? false,
@@ -94,6 +96,13 @@ describe('VersionSnackbar.vue', () => {
 
       expect(snackbar.exists()).toBe(true);
     });
+
+    test('if update is in progress', () => {
+      const wrapper = createWrapper({ updateInProgress: true });
+      const snackbar = wrapper.find('.version-snackbar');
+
+      expect(snackbar.exists()).toBe(true);
+    });
   });
 
   describe('render blocking overlay', () => {
@@ -110,6 +119,13 @@ describe('VersionSnackbar.vue', () => {
 
       expect(overlay.exists()).toBe(true);
     });
+
+    test('if update is in progress', () => {
+      const wrapper = createWrapper({ updateInProgress: true });
+      const overlay = wrapper.findComponent(BlurredOverlay);
+
+      expect(overlay.exists()).toBe(true);
+    });
   });
 
   describe('render message', () => {
@@ -125,15 +141,23 @@ describe('VersionSnackbar.vue', () => {
       const message = wrapper.get('.version-snackbar__message');
 
       expect(message.isVisible()).toBeTruthy();
-      expect(message.text()).toBe('update.optional');
+      expect(message.text()).toBe('update.updateAvailable');
     });
 
     test('if update is mandatory', () => {
-      const wrapper = createWrapper({ updateIsAvailable: true });
+      const wrapper = createWrapper({ updateIsMandatory: true });
+      const message = wrapper.get('.version-snackbar__message');
+
+      expect(message.isVisible()).toBeTruthy();
+      expect(message.text()).toBe('update.updateMandatory');
+    });
+
+    test('if update is in progress', () => {
+      const wrapper = createWrapper({ updateInProgress: true });
       const message = wrapper.get('.version-snackbar__message');
 
       expect(message.isVisible()).toBeTruthy();
-      expect(message.text()).toBe('update.optional');
+      expect(message.text()).toBe('update.updateInProgress');
     });
   });