add tree loading, improve render perf for agent table

src/components/AgentTable.vue

@@ -7,8 +7,10 @@
       :columns="columns"
       row-key="id"
       binary-state-sort
+      virtual-scroll
       :pagination.sync="pagination"
-      hide-bottom
+      :rows-per-page-options="[0]"
+      no-data-label="No Agents"
     >
       <!-- header slots -->
       <template v-slot:header-cell-smsalert="props">
@@ -361,7 +363,7 @@ export default {
   data() {
     return {
       pagination: {
-        rowsPerPage: 9999,
+        rowsPerPage: 0,
         sortBy: "hostname",
         descending: false
       },

src/views/Dashboard.vue

@@ -27,7 +27,10 @@
       <FileBar :clients="clients" @edited="refreshEntireSite" />
       <q-splitter v-model="outsideModel">
         <template v-slot:before>
-          <div class="q-pa-sm q-gutter-sm" v-if="treeReady">
+          <div v-if="!treeReady" class="q-pa-sm q-gutter-sm text-center" style="height: 30vh">
+            <q-spinner size="40px" color="primary" />
+          </div>
+          <div v-else class="q-pa-sm q-gutter-sm">
             <q-list dense class="rounded-borders">
               <q-item clickable v-ripple :active="allClientsActive" @click="clearTreeSelected">
                 <q-item-section avatar>
@@ -89,10 +92,8 @@
               </q-tree>
             </q-list>
           </div>
-          <div v-else>
-            <p>Loading</p>
-          </div>
         </template>
+
         <template v-slot:after>
           <q-splitter v-model="innerModel" horizontal style="height: 88vh">
             <template v-slot:before>
@@ -363,9 +364,9 @@ export default {
     },
     filteredAgents() {
       if (this.tab === "mixed") {
-        return this.frame;
+        return Object.freeze(this.frame);
       }
-      return this.frame.filter(k => k.monitoring_type === this.tab);
+      return Object.freeze(this.frame.filter(k => k.monitoring_type === this.tab));
     },
     activeNode() {
       return {