From 87835c41eb6d9d7f066856a41582d939365cb2aa Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Fri, 6 Sep 2019 17:44:10 +0100
Subject: [PATCH] added spinner and filter params event

---
 src/components/app/Tabs/Explore/servers.vue | 24 +++++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/app/Tabs/Explore/servers.vue b/src/components/app/Tabs/Explore/servers.vue
index 41ef70b..5d9e6e5 100644
--- a/src/components/app/Tabs/Explore/servers.vue
+++ b/src/components/app/Tabs/Explore/servers.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="servers-tab">
-    <search-header name="servers" />
+    <search-header name="servers" @params="filterParamsEvent"/>
     <div class="items-main-container">
       <div class="items-container">
+          <spinner class="spinner" v-if="!publicServers" :size="80"/>
         <div class="items">
-          <server-template v-for="server in publicServers" :key="server.id" :server="server"/>
-  
-  
+          <server-template v-for="server in publicServers" :key="server.id" :server="server"/>  
         </div>
       </div>
     </div>
@@ -17,21 +16,29 @@
 import searchHeader from "./searchHeader";
 import serverTemplate from './serverTemplate';
 import exploreService from '@/services/exploreService';
+import Spinner from "@/components/Spinner";
 
 export default {
-  components: { searchHeader, serverTemplate },
+  components: { searchHeader, serverTemplate, Spinner },
   data() {
     return {
       publicServers: null,
+      params: '?verified=true'
     }
   },
   methods: {
     async getServersList() {
-      const {ok, result, error} = await exploreService.getServersList();
+      this.publicServers = null;
+      const {ok, result, error} = await exploreService.getServersList(this.params);
       if (ok) {
         this.publicServers =  result.data;
       }
-
+    },
+    filterParamsEvent(params) {
+      if (this.params != params) {
+        this.params = params || ''
+        this.getServersList();
+      }
     }
   },
   mounted() {
@@ -73,4 +80,7 @@ export default {
     user-select: none;
   }
 }
+.spinner {
+  align-self: center;
+}
 </style>
\ No newline at end of file