perf: improved refresh of data tables

src/renderer/components/WorkspaceExploreBarDatabase.vue

@@ -3,7 +3,7 @@
       <summary
          class="accordion-header database-name pb-0"
          :class="{'text-bold': breadcrumbs.schema === database.name}"
-         @click="changeBreadcrumbs({schema: database.name, table:null})"
+         @click="changeBreadcrumbs({schema: database.name, table: null})"
          @contextmenu.prevent="showDatabaseContext($event, database.name)"
       >
          <i class="icon mdi mdi-18px mdi-chevron-right" />
@@ -22,7 +22,7 @@
                   @contextmenu.prevent="showTableContext($event, table.TABLE_NAME)"
                >
                   <a class="table-name">
-                     <i class="table-icon mdi mdi-18px mdi-table mr-1" />
+                     <i class="table-icon mdi mdi-18px mr-1" :class="table.TABLE_TYPE === 'VIEW' ? 'mdi-table-eye' : 'mdi-table'" />
                      <span>{{ table.TABLE_NAME }}</span>
                   </a>
                </li>

src/renderer/components/WorkspaceTableTab.vue

@@ -4,7 +4,7 @@
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
                <button
-                  class="btn btn-link btn-sm"
+                  class="btn btn-link btn-sm mr-0 pr-0"
                   :class="{'loading':isQuering}"
                   title="F5"
                   @click="reloadTable"
@@ -14,7 +14,6 @@
                </button>
                <button
                   class="btn btn-link btn-sm"
-                  :class="{'disabled':isQuering}"
                   @click="showAddModal"
                >
                   <span>{{ $t('word.add') }}</span>
@@ -34,7 +33,6 @@
       <div class="workspace-query-results column col-12">
          <WorkspaceQueryTable
             v-if="results"
-            v-show="!isQuering"
             ref="queryTable"
             :results="results"
             :tab-uid="tabUid"
@@ -123,10 +121,14 @@ export default {
       async getTableData () {
          if (!this.table) return;
          this.isQuering = true;
-         this.results = [];
          const fieldsArr = [];
          const keysArr = [];
+
+         // if table changes clear cached values
+         if (this.lastTable !== this.table) {
+            this.results = [];
             this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });
+         }
 
          const params = {
             uid: this.connection.uid,
@@ -147,18 +149,6 @@ export default {
             this.addNotification({ status: 'error', message: err.stack });
          }
 
-         try { // Table data
-            const { status, response } = await Tables.getTableData(params);
-
-            if (status === 'success')
-               this.results = [response];
-            else
-               this.addNotification({ status: 'error', message: response });
-         }
-         catch (err) {
-            this.addNotification({ status: 'error', message: err.stack });
-         }
-
          try { // Key usage (foreign keys)
             const { status, response } = await Tables.getKeyUsage(params);
 
@@ -173,15 +163,28 @@ export default {
             this.addNotification({ status: 'error', message: err.stack });
          }
 
+         try { // Table data
+            const { status, response } = await Tables.getTableData(params);
+
+            if (status === 'success')
+               this.results = [response];
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
          this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: fieldsArr });
          this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: keysArr });
+
          this.isQuering = false;
       },
       getTable () {
          return this.table;
       },
       reloadTable () {
-         if (!this.isQuering) this.getTableData();
+         this.getTableData();
       },
       showAddModal () {
          this.isAddModal = true;

src/renderer/scss/_table-keys.scss

@@ -1,5 +1,5 @@
 .column-key {
-  transform: rotate(90deg);
+  transform: rotate(45deg);
   font-size: 0.7rem;
   line-height: 1.5;
   margin-right: 0.2rem;