UI: add navigator loader

aleksey-hoffman · Jun 3, 2022 · 1343037 · 1343037
1 parent d8f4d43
commit 1343037
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 27 deletions.
diff --git a/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue b/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue
@@ -0,0 +1,43 @@
+<!-- SPDX-License-Identifier: GPL-3.0-or-later
+License: GNU GPLv3 or later. See the license file in the project root for more information.
+Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
+-->
+
+<template>
+  <div class="workspace-area__loader">
+    <div v-if="!dirItemsInfoIsFetched">
+      <div class="workspace-area__loader-line fade-in-1s">
+        <v-progress-linear
+          indeterminate
+          color="var(--key-color-1)"
+          height="1"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapFields} from 'vuex-map-fields'
+
+export default {
+  computed: {
+    ...mapFields({
+      dirItemsInfoIsFetched: 'navigatorView.dirItemsInfoIsFetched',
+    }),
+  },
+}
+</script>
+
+<style>
+.workspace-area__loader {
+  position: relative;
+}
+
+.workspace-area__loader-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+</style>
diff --git a/src/components/WorkspaceAreaContent.vue b/src/components/WorkspaceAreaContent.vue
@@ -5,27 +5,37 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
 
 <template>
   <div>
-    <virtual-workspace-area-content
-      v-if="navigatorLayout === 'list'"
-      layout="list"
-      :items="formattedDirItems"
-    />
-    <virtual-workspace-area-content
-      v-if="navigatorLayout === 'grid'"
-      layout="grid"
-      :items="formattedDirItemsRows"
-    />
+    <WorkspaceAreaLoader />
+    <div
+      v-show="dirItemsInfoIsPartiallyFetched || dirItemsInfoIsFetched"
+      class="fade-in-200ms"
+    >
+      <virtual-workspace-area-content
+        v-if="navigatorLayout === 'list'"
+        layout="list"
+        :items="formattedDirItems"
+      />
+      <virtual-workspace-area-content
+        v-if="navigatorLayout === 'grid'"
+        layout="grid"
+        :items="formattedDirItemsRows"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import {mapFields} from 'vuex-map-fields'
 import {mapState} from 'vuex'
 import itemFilter from '../utils/itemFilter'
+import WorkspaceAreaLoader from './WorkspaceArea/components/WorkspaceLoader/index.vue'
 
 const lodash = require('../utils/lodash.min.js')
 
 export default {
+  components: {
+    WorkspaceAreaLoader,
+  },
   data () {
     return {
       status: {
@@ -84,6 +94,7 @@ export default {
       filterQuery: 'filterField.view.navigator.query',
       filterOptions: 'filterField.view.navigator.options',
       currentDir: 'navigatorView.currentDir',
+      dirItemsInfoIsPartiallyFetched: 'navigatorView.dirItemsInfoIsPartiallyFetched',
       dirItemsInfoIsFetched: 'navigatorView.dirItemsInfoIsFetched',
       showDirItemKindDividers: 'storageData.settings.navigator.showDirItemKindDividers',
     }),
@@ -391,36 +402,32 @@ export default {
       this.scroll.lastPosition = this.scroll.newPosition
       return this.scroll.delta
     },
+    getDirItemGroupTitleDescription (itemCount) {
+      const itemWord = this.$localizeUtils.pluralize(itemCount, 'item')
+      return this.dirItemsInfoIsFetched ? `${itemCount} ${itemWord}` : `Loading ${itemWord}`
+    },
     getDirItemGroupTitle (type) {
       if (type === 'directory') {
         const itemCount = this.directoryDirItems.length
-        const itemWord = this.$localizeUtils.pluralize(itemCount, 'item')
-        return `Directories | ${itemCount} ${itemWord}`
+        return `Directories | ${this.getDirItemGroupTitleDescription(itemCount)}`
       }
       else if (type === 'file') {
         const itemCount = this.fileDirItems.length
-        const itemWord = this.$localizeUtils.pluralize(itemCount, 'item')
-        return `Files | ${itemCount} ${itemWord}`
+        return `Files | ${this.getDirItemGroupTitleDescription(itemCount)}`
       }
       else if (type === 'image-files') {
         const itemCount = this.imageFilesDirItems.length
-        const itemWord = this.$localizeUtils.pluralize(itemCount, 'item')
-        return `Images | ${itemCount} ${itemWord}`
+        return `Images | ${this.getDirItemGroupTitleDescription(itemCount)}`
       }
       else if (type === 'video-files') {
         const itemCount = this.videoFilesDirItems.length
-        const itemWord = this.$localizeUtils.pluralize(itemCount, 'item')
-        return `Videos | ${itemCount} ${itemWord}`
+        return `Videos | ${this.getDirItemGroupTitleDescription(itemCount)}`
       }
       else if (type === 'other-files') {
         const itemCount = this.otherFilesDirItems.length
-        const itemWord = this.$localizeUtils.pluralize(itemCount, 'item')
-        return `Other | ${itemCount} ${itemWord}`
+        return `Other | ${this.getDirItemGroupTitleDescription(itemCount)}`
       }
-    }
-  }
+    },
+  },
 }
 </script>
-
-<style>
-</style>
diff --git a/src/views/Navigator.vue b/src/views/Navigator.vue
@@ -294,8 +294,7 @@ export default {
 
 .workspace__area {
   display: grid;
-  grid-template-rows: 48px 38px 1fr;
-
+  grid-template-rows: 48px 36px 1fr;
 }
 
 .workspace-area__header {