Added loading state for table

Author: romanslonov

docs/components/table.md

@@ -2,7 +2,7 @@
 
 ## Default
 <div class="p-3 pb-5 border rounded-2 my-3 flex">
-  <v-table :fields="normal.fields" :items="normal.items" />
+  <v-table :ready="false" :fields="normal.fields" :items="normal.items" />
 </div>
 
 ```html
@@ -291,6 +291,7 @@ export default {
 ## Table Props
 Name       | Type     | Description | Default   | Required
 ---------- | -------- | ----------- | --------- | --------
+ready      | Boolean    | Show loading if false. Allowing to load data in async way | true | false
 value      | Array    | Returns selected values | [] | false
 fields     | Object   | Columns labels          | {} | false
 items      | Array    | Data                    | [] | false
@@ -314,7 +315,7 @@ Name       | Type     | Description | Default
 title      | String   | Appearance of spinner ['default', 'primary']  | 'Table title'
 searchable | Boolean  | Display search or not | false
 handleSearchInput | Function | Function from table to keep `query` up to date to filter data properly. Required when `searchable` is `true`. | None | false
-disabledSearch | Boolean | 
+disabledSearch | Boolean |
 
 ## TableHeader Slots
 Name    | Props     | Description

src/components/Table/main.vue

@@ -9,7 +9,11 @@
       :disabledSearch="items.length === 0"
     ></slot>
 
-    <table class="table">
+    <div class="table-spinner" v-if="!ready">
+      <v-spinner />
+    </div>
+
+    <table class="table" v-else>
 
       <thead>
       <tr v-if="!(items.length === 0 || items.length > 0 && mutableItems.length === 0)">
@@ -90,6 +94,7 @@
 
 <script>
 import fuzzysearch from 'fuzzysearch';
+import VSpinner from '../Spinner';
 import { toString } from '../../helpers/util';
 
 const defaultSortCompare = (a, b, sortBy) => (
@@ -99,6 +104,10 @@ const defaultSortCompare = (a, b, sortBy) => (
 export default {
   name: 'VTable',
   props: {
+    ready: {
+      type: Boolean,
+      default: true,
+    },
     value: {
       type: Array,
       default: () => [],
@@ -206,5 +215,6 @@ export default {
       this.selected = [...this.mutableItems];
     },
   },
+  components: { VSpinner },
 };
 </script>