Merge branch 'justice47-pr/loading-animation'

Author: Yousef Sultan

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.0.0",
+    "tb-skeleton": "^0.3.5",
     "vue": "^1.0.21",
     "fuse.js": "^2.6.2"
   },

src/DataTable.vue

@@ -66,6 +66,11 @@
 					</td>
 					<slot name="tbody-tr" :row="row"></slot>
 				</tr>
+				<tr v-for="n in currentPerPage" v-if="rows.length===0&&loadingAnimation===true">
+					<td :colspan="columns.length">
+						<tb-skeleton :height="15" theme="opacity" bg-color="#dcdbdc" shape="radius"></tb-skeleton>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 
@@ -112,8 +117,14 @@
 <script>
 	import Fuse from 'fuse.js';
 	import locales from './locales';
+	import  'tb-skeleton/dist/skeleton.css'
+	import {TbSkeleton,Skeleton} from 'tb-skeleton'
 
 	export default {
+		components: {
+      TbSkeleton,
+      Skeleton
+    },
 		props: {
 			title: '',
 			columns: {},
@@ -140,6 +151,7 @@
 			printable: {default: true},
 			locale: {default: 'en'},
 			initSortCol: {default: -1}
+			loadingAnimation: {default: true},
 		},
 
 		data: () => ({