Merge pull request #1785 from gerhean/fix-frontend-loading-screen

Fix frontend loading screen
reposense · Jun 15, 2022 · 70b7185 · 70b7185
2 parents 538365a + 409c847
commit 70b7185
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 34 deletions.
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
@@ -1,10 +1,8 @@
 <template lang="pug">
 #app
   loading-overlay.overlay-loader(
-    v-cloak,
-    v-bind:active.sync="isLoadingOverlayEnabled",
-    v-bind:opacity='loadingOverlayOpacity',
-    v-bind:is-full-page="true"
+    v-bind:active='loadingOverlayCount > 0',
+    v-bind:opacity='loadingOverlayOpacity'
   )
     template(v-slot:default)
       i.overlay-loading-icon.fa.fa-spinner.fa-spin()
@@ -99,7 +97,6 @@ const app = {
       users: [],
       userUpdated: false,
 
-      isLoadingOverlayEnabled: false,
       loadingOverlayOpacity: 1,
 
       tabType: 'empty',
@@ -118,9 +115,6 @@ const app = {
     '$store.state.tabAuthorshipInfo': function () {
       this.activateTab('authorship');
     },
-    '$store.state.loadingOverlayCount': function () {
-      this.isLoadingOverlayEnabled = this.$store.state.loadingOverlayCount > 0;
-    },
   },
   methods: {
     // model functions //
@@ -145,9 +139,9 @@ const app = {
     },
 
     async updateReportView() {
-      this.$store.commit('incrementLoadingOverlayCount', 1);
       this.$store.commit('updateLoadingOverlayMessage', loadingResourcesMessage);
       this.userUpdated = false;
+      await this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1);
       try {
         const {
           creationDate,
@@ -296,7 +290,7 @@ const app = {
   },
 
   computed: {
-    ...mapState(['loadingOverlayMessage', 'isTabActive']),
+    ...mapState(['loadingOverlayCount', 'loadingOverlayMessage', 'isTabActive']),
   },
 
   components: {

diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
@@ -45,4 +45,15 @@ export default createStore({
       window.encodeHash();
     },
   },
+  actions: {
+    // Actions are called with dispatch
+
+    async incrementLoadingOverlayCountForceReload({ commit }, increment) {
+      commit('incrementLoadingOverlayCount', increment);
+      await new Promise(window.requestAnimationFrame);
+      await new Promise(window.requestAnimationFrame);
+      // Needed as browsers render lazily by default
+      // https://stackoverflow.com/a/44146560
+    },
+  },
 });
diff --git a/frontend/src/views/v-authorship.vue b/frontend/src/views/v-authorship.vue
@@ -535,20 +535,18 @@ export default {
       window.encodeHash();
     },
 
-    updateSelectedFiles(setIsLoaded = false) {
-      this.$store.commit('incrementLoadingOverlayCount', 1);
-      setTimeout(() => {
-        this.selectedFiles = this.files.filter(
-            (file) => ((this.selectedFileTypes.includes(file.fileType) && !file.isBinary && !file.isIgnored)
-            || (file.isBinary && this.isBinaryFilesChecked) || (file.isIgnored && this.isIgnoredFilesChecked))
-            && minimatch(file.path, this.searchBarValue || '*', { matchBase: true, dot: true }),
-        )
-            .sort(this.sortingFunction);
-        if (setIsLoaded) {
-          this.isLoaded = true;
-        }
-        this.$store.commit('incrementLoadingOverlayCount', -1);
-      });
+    async updateSelectedFiles(setIsLoaded = false) {
+      await this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1);
+      this.selectedFiles = this.files.filter(
+          (file) => ((this.selectedFileTypes.includes(file.fileType) && !file.isBinary && !file.isIgnored)
+          || (file.isBinary && this.isBinaryFilesChecked) || (file.isIgnored && this.isIgnoredFilesChecked))
+          && minimatch(file.path, this.searchBarValue || '*', { matchBase: true, dot: true }),
+      )
+          .sort(this.sortingFunction);
+      if (setIsLoaded) {
+        this.isLoaded = true;
+      }
+      this.$store.commit('incrementLoadingOverlayCount', -1);
     },
 
     indicateSearchBar() {

diff --git a/frontend/src/views/v-summary.vue b/frontend/src/views/v-summary.vue
@@ -179,8 +179,7 @@ export default {
       }
       const { allGroupsMerged } = this;
 
-      this.$store.commit('incrementLoadingOverlayCount', 1);
-      setTimeout(() => {
+      this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1).then(() => {
         this.getFilteredRepos();
         this.updateMergedGroup(allGroupsMerged);
         this.$store.commit('incrementLoadingOverlayCount', -1);
@@ -407,17 +406,14 @@ export default {
       this.getFiltered();
     },
 
-    getFiltered() {
+    async getFiltered() {
       this.setSummaryHash();
       window.deactivateAllOverlays();
 
-      this.$store.commit('incrementLoadingOverlayCount', 1);
-      // Use setTimeout() to force this.filtered to update only after loading screen is displayed.
-      setTimeout(() => {
-        this.getFilteredRepos();
-        this.getMergedRepos();
-        this.$store.commit('incrementLoadingOverlayCount', -1);
-      });
+      await this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1);
+      this.getFilteredRepos();
+      this.getMergedRepos();
+      this.$store.commit('incrementLoadingOverlayCount', -1);
     },
 
     getFilteredRepos() {