feat: loading animation in properties tabs

src/renderer/components/BaseLoader.vue

@@ -0,0 +1,22 @@
+<template>
+   <div class="empty">
+      <div class="loading loading-lg" />
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'BaseLoader'
+};
+</script>
+<style scoped>
+.empty {
+  position: absolute;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  left: 0;
+  justify-content: center;
+  right: 0;
+}
+</style>

src/renderer/components/WorkspacePropsTab.vue

@@ -51,7 +51,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12">
+      <div class="workspace-query-results column col-12 p-relative">
+         <BaseLoader v-if="isLoading" />
          <WorkspacePropsTable
             v-if="localFields"
             ref="indexTable"
@@ -106,6 +107,7 @@
 import { mapGetters, mapActions } from 'vuex';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
+import BaseLoader from '@/components/BaseLoader';
 import WorkspacePropsTable from '@/components/WorkspacePropsTable';
 import WorkspacePropsOptionsModal from '@/components/WorkspacePropsOptionsModal';
 import WorkspacePropsIndexesModal from '@/components/WorkspacePropsIndexesModal';
@@ -114,6 +116,7 @@ import WorkspacePropsForeignModal from '@/components/WorkspacePropsForeignModal'
 export default {
    name: 'WorkspacePropsTab',
    components: {
+      BaseLoader,
       WorkspacePropsTable,
       WorkspacePropsOptionsModal,
       WorkspacePropsIndexesModal,
@@ -126,7 +129,7 @@ export default {
    data () {
       return {
          tabUid: 'prop',
-         isQuering: false,
+         isLoading: false,
          isSaving: false,
          isOptionsModal: false,
          isIndexesModal: false,
@@ -205,8 +208,10 @@ export default {
       }),
       async getFieldsData () {
          if (!this.table) return;
+
+         this.localFields = [];
          this.newFieldsCounter = 0;
-         this.isQuering = true;
+         this.isLoading = true;
          this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
 
          const params = {
@@ -281,7 +286,7 @@ export default {
             this.addNotification({ status: 'error', message: err.stack });
          }
 
-         this.isQuering = false;
+         this.isLoading = false;
       },
       async saveChanges () {
          if (this.isSaving) return;

src/renderer/components/WorkspacePropsTabFunction.vue

@@ -43,7 +43,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12 mt-2">
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
          <label class="form-label ml-2">{{ $t('message.functionBody') }}</label>
          <QueryEditor
             v-if="isSelected"
@@ -74,6 +75,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspacePropsFunctionOptionsModal from '@/components/WorkspacePropsFunctionOptionsModal';
 import WorkspacePropsFunctionParamsModal from '@/components/WorkspacePropsFunctionParamsModal';
@@ -82,6 +84,7 @@ import Functions from '@/ipc-api/Functions';
 export default {
    name: 'WorkspacePropsTabFunction',
    components: {
+      BaseLoader,
       QueryEditor,
       WorkspacePropsFunctionOptionsModal,
       WorkspacePropsFunctionParamsModal
@@ -93,7 +96,7 @@ export default {
    data () {
       return {
          tabUid: 'prop',
-         isQuering: false,
+         isLoading: false,
          isSaving: false,
          isOptionsModal: false,
          isParamsModal: false,
@@ -166,7 +169,9 @@ export default {
       }),
       async getFunctionData () {
          if (!this.function) return;
-         this.isQuering = true;
+
+         this.isLoading = true;
+         this.localFunction = { sql: '' };
 
          const params = {
             uid: this.connection.uid,
@@ -189,7 +194,7 @@ export default {
          }
 
          this.resizeQueryEditor();
-         this.isQuering = false;
+         this.isLoading = false;
       },
       async saveChanges () {
          if (this.isSaving) return;

src/renderer/components/WorkspacePropsTabRoutine.vue

@@ -43,7 +43,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12 mt-2">
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
          <label class="form-label ml-2">{{ $t('message.routineBody') }}</label>
          <QueryEditor
             v-if="isSelected"
@@ -75,6 +76,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import QueryEditor from '@/components/QueryEditor';
+import BaseLoader from '@/components/BaseLoader';
 import WorkspacePropsRoutineOptionsModal from '@/components/WorkspacePropsRoutineOptionsModal';
 import WorkspacePropsRoutineParamsModal from '@/components/WorkspacePropsRoutineParamsModal';
 import Routines from '@/ipc-api/Routines';
@@ -83,6 +85,7 @@ export default {
    name: 'WorkspacePropsTabRoutine',
    components: {
       QueryEditor,
+      BaseLoader,
       WorkspacePropsRoutineOptionsModal,
       WorkspacePropsRoutineParamsModal
    },
@@ -93,7 +96,7 @@ export default {
    data () {
       return {
          tabUid: 'prop',
-         isQuering: false,
+         isLoading: false,
          isSaving: false,
          isOptionsModal: false,
          isParamsModal: false,
@@ -166,7 +169,8 @@ export default {
       }),
       async getRoutineData () {
          if (!this.routine) return;
-         this.isQuering = true;
+         this.localRoutine = { sql: '' };
+         this.isLoading = true;
 
          const params = {
             uid: this.connection.uid,
@@ -189,7 +193,7 @@ export default {
          }
 
          this.resizeQueryEditor();
-         this.isQuering = false;
+         this.isLoading = false;
       },
       async saveChanges () {
          if (this.isSaving) return;

src/renderer/components/WorkspacePropsTabScheduler.vue

@@ -114,7 +114,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12 mt-2">
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
          <label class="form-label ml-2">{{ $t('message.schedulerBody') }}</label>
          <QueryEditor
             v-if="isSelected"
@@ -137,6 +138,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspacePropsSchedulerTimingModal from '@/components/WorkspacePropsSchedulerTimingModal';
 import Schedulers from '@/ipc-api/Schedulers';
@@ -144,6 +146,7 @@ import Schedulers from '@/ipc-api/Schedulers';
 export default {
    name: 'WorkspacePropsTabScheduler',
    components: {
+      BaseLoader,
       QueryEditor,
       WorkspacePropsSchedulerTimingModal
    },
@@ -154,7 +157,7 @@ export default {
    data () {
       return {
          tabUid: 'prop',
-         isQuering: false,
+         isLoading: false,
          isSaving: false,
          isTimingModal: false,
          originalScheduler: null,
@@ -226,7 +229,7 @@ export default {
       }),
       async getSchedulerData () {
          if (!this.scheduler) return;
-         this.isQuering = true;
+         this.isLoading = true;
 
          const params = {
             uid: this.connection.uid,
@@ -249,7 +252,7 @@ export default {
          }
 
          this.resizeQueryEditor();
-         this.isQuering = false;
+         this.isLoading = false;
       },
       async saveChanges () {
          if (this.isSaving) return;

src/renderer/components/WorkspacePropsTabTrigger.vue

@@ -95,7 +95,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12 mt-2">
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
          <label class="form-label ml-2">{{ $t('message.triggerStatement') }}</label>
          <QueryEditor
             v-if="isSelected"
@@ -110,13 +111,15 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
 import QueryEditor from '@/components/QueryEditor';
+import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
 import Triggers from '@/ipc-api/Triggers';
 
 export default {
    name: 'WorkspacePropsTabTrigger',
    components: {
+      BaseLoader,
       QueryEditor
    },
    props: {
@@ -126,7 +129,7 @@ export default {
    data () {
       return {
          tabUid: 'prop',
-         isQuering: false,
+         isLoading: false,
          isSaving: false,
          originalTrigger: null,
          localTrigger: { sql: '' },
@@ -197,7 +200,9 @@ export default {
       }),
       async getTriggerData () {
          if (!this.trigger) return;
-         this.isQuering = true;
+
+         this.localTrigger = { sql: '' };
+         this.isLoading = true;
 
          const params = {
             uid: this.connection.uid,
@@ -220,7 +225,7 @@ export default {
          }
 
          this.resizeQueryEditor();
-         this.isQuering = false;
+         this.isLoading = false;
       },
       async saveChanges () {
          if (this.isSaving) return;

src/renderer/components/WorkspacePropsTabView.vue

@@ -156,7 +156,8 @@
             </div>
          </div>
       </div>
-      <div class="workspace-query-results column col-12 mt-2">
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
          <label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
          <QueryEditor
             v-if="isSelected"
@@ -172,12 +173,14 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import Views from '@/ipc-api/Views';
 
 export default {
    name: 'WorkspacePropsTabView',
    components: {
+      BaseLoader,
       QueryEditor
    },
    props: {
@@ -187,7 +190,7 @@ export default {
    data () {
       return {
          tabUid: 'prop',
-         isQuering: false,
+         isLoading: false,
          isSaving: false,
          originalView: null,
          localView: { sql: '' },
@@ -251,7 +254,8 @@ export default {
       }),
       async getViewData () {
          if (!this.view) return;
-         this.isQuering = true;
+         this.isLoading = true;
+         this.localView = { sql: '' };
 
          const params = {
             uid: this.connection.uid,
@@ -274,7 +278,7 @@ export default {
          }
 
          this.resizeQueryEditor();
-         this.isQuering = false;
+         this.isLoading = false;
       },
       async saveChanges () {
          if (this.isSaving) return;