diff --git a/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue b/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue
new file mode 100644
index 00000000..f74ac22b
--- /dev/null
+++ b/src/components/WorkspaceArea/components/WorkspaceLoader/index.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/WorkspaceAreaContent.vue b/src/components/WorkspaceAreaContent.vue
index 5296d160..51243c1c 100644
--- a/src/components/WorkspaceAreaContent.vue
+++ b/src/components/WorkspaceAreaContent.vue
@@ -5,16 +5,22 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
@@ -22,10 +28,14 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
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)}`
}
- }
- }
+ },
+ },
}
-
-
diff --git a/src/views/Navigator.vue b/src/views/Navigator.vue
index 4ef987d6..7b1bd57b 100644
--- 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 {