Enhancement: UI improvements (#2164)

* enhancement: show loader while loading gird/gallery data

re #2150

Signed-off-by: Pranav C <pranavxc@gmail.com>

* enhancement: add icon for select option in filter/sort

Signed-off-by: Pranav C <pranavxc@gmail.com>

* enhancement: show loader and transitions

- add transition for menu
- include icon within select(fileter/sort)
- show loader while loading data(grid/gallery)
- remove announcement

Signed-off-by: Pranav C <pranavxc@gmail.com>

* refactor: remove announcement component and related state props

Signed-off-by: Pranav C <pranavxc@gmail.com>

* fix: ignore loader while switching tab

Signed-off-by: Pranav C <pranavxc@gmail.com>

* chore: upgrade nc-help

Signed-off-by: Pranav C <pranavxc@gmail.com>

* test/kludge: avoid flicker with a delay

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue

@@ -336,8 +336,13 @@
           :style="{ height: isForm ? '100%' : 'calc(100% - 36px)' }"
           style="overflow: auto; width: 100%"
         >
+          <div v-if="loadingData && (isGallery || isGrid)" class="d-100 h-100 align-center justify-center d-flex flex-column">
+            <v-progress-circular size="40" color="grey" width="2" indeterminate class="mb-4" />
+            <span v-if="selectedView" class="caption grey--text">Loading view data... </span>
+          </div>
+
           <template
-            v-if="selectedViewId && selectedView"
+            v-else-if="selectedViewId && selectedView"
           >
             <!--          <v-skeleton-loader v-if="!dataLoaded && loadingData || !meta" type="table" />-->
             <template v-if="selectedView.type === viewTypes.GRID">
@@ -507,7 +512,7 @@
         @rerender="viewKey++"
         @generateNewViewKey="generateNewViewKey"
         @mapFieldsAndShowFields="mapFieldsAndShowFields"
-        @loadTableData="loadTableData"
+        @loadTableData="loadTableData(false)"
         @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
       >
         <!--        <v-tooltip bottom>
@@ -790,8 +795,8 @@ export default {
     syncDataDebounce: debounce(async function(self) {
       await self.syncData()
     }, 500),
-    loadTableDataDeb: debounce(async function(self) {
-      await self.loadTableDataFn()
+    loadTableDataDeb: debounce(async function(self, ignoreLoader) {
+      await self.loadTableDataFn(ignoreLoader)
     }, 200),
     viewKey: 0,
     extraViewParams: {},
@@ -889,7 +894,7 @@ export default {
   watch: {
     isActive(n, o) {
       if (!o && n) {
-        this.reload()
+        this.reload(true)
       }
     },
     page(p) {
@@ -978,7 +983,7 @@ export default {
       await this.reload()
       this.$e('a:table:reload:navbar')
     },
-    async reload() {
+    async reload(ignoreLoader = false) {
       this.$store.dispatch('meta/ActLoadMeta', {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
@@ -988,7 +993,7 @@ export default {
       if (this.selectedView && this.selectedView.show_as === 'kanban') {
         await this.loadKanbanData()
       } else {
-        await this.loadTableData()
+        await this.loadTableData(ignoreLoader)
       }
       this.key = Math.random()
     },
@@ -1399,17 +1404,17 @@ export default {
       })
     },
     clickPagination() {
-      this.loadTableData()
+      this.loadTableData(false)
       this.$e('a:grid:pagination')
     },
-    loadTableData() {
-      this.loadTableDataDeb(this)
+    loadTableData(ignoreLoader = true) {
+      this.loadTableDataDeb(this, ignoreLoader)
     },
-    async loadTableDataFn() {
+    async loadTableDataFn(ignoreLoader = true) {
       if (this.isForm || !this.selectedView || !this.selectedView.title) {
         return
       }
-      this.loadingData = true
+      this.loadingData = !ignoreLoader
       try {
         // if (this.api) {
         // const { list, count } = await this.api.paginatedList(this.queryParams)