feat(UI): loader layers on query and data tabs

antares-sql · Mar 9, 2021 · b232a3b · b232a3b
1 parent e9a26c1
commit b232a3b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue
@@ -49,7 +49,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12">
+      <div class="workspace-query-results p-relative column col-12">
+         <BaseLoader v-if="isQuering" />
          <WorkspaceQueryTable
             v-if="results"
             v-show="!isQuering"
@@ -69,13 +70,15 @@
 <script>
 import Database from '@/ipc-api/Database';
 import QueryEditor from '@/components/QueryEditor';
+import BaseLoader from '@/components/BaseLoader';
 import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
 import { mapGetters, mapActions } from 'vuex';
 import tableTabs from '@/mixins/tableTabs';
 
 export default {
    name: 'WorkspaceQueryTab',
    components: {
+      BaseLoader,
       QueryEditor,
       WorkspaceQueryTable
    },
@@ -243,6 +246,10 @@ export default {
       }
     }
   }
+
+  .workspace-query-results {
+    min-height: 200px;
+  }
 }
 
 </style>
diff --git a/src/renderer/components/WorkspaceTableTab.vue b/src/renderer/components/WorkspaceTableTab.vue
@@ -83,7 +83,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12">
+      <div class="workspace-query-results p-relative column col-12">
+         <BaseLoader v-if="isQuering" />
          <WorkspaceQueryTable
             v-if="results"
             ref="queryTable"
@@ -118,6 +119,7 @@
 
 <script>
 import Tables from '@/ipc-api/Tables';
+import BaseLoader from '@/components/BaseLoader';
 import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
 import ModalNewTableRow from '@/components/ModalNewTableRow';
 import ModalFakerRows from '@/components/ModalFakerRows';
@@ -127,6 +129,7 @@ import tableTabs from '@/mixins/tableTabs';
 export default {
    name: 'WorkspaceTableTab',
    components: {
+      BaseLoader,
       WorkspaceQueryTable,
       ModalNewTableRow,
       ModalFakerRows