add loading.

client/src/components/RoomsList.vue

@@ -3,6 +3,8 @@
     :headers="headers"
     :items="rooms"
     class="elevation-1"
+    :loading="loading"
+    loading-text="Loading... Please wait"
   >
     <template v-slot:[`item.url`]="{ item }">
       <a :href="item.url"> Link </a>
@@ -18,10 +20,12 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
+import { Vue, Component, Prop } from 'vue-property-decorator'
 
 @Component
 export default class RoomsList extends Vue {
+  @Prop(Boolean) readonly loading: boolean = false
+
   private headers = [
     { text: 'Name', value: 'name' },
     { text: 'Link', value: 'url' },

client/src/views/Home.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container>
-    <RoomsList />
+    <v-btn @click="LoadRooms" class="mb-3" color="green" icon><v-icon>mdi-refresh</v-icon></v-btn>
+
+    <RoomsList :loading="loading" />
   </v-container>
 </template>
 
@@ -13,5 +15,17 @@ import RoomsList from '@/components/RoomsList.vue'
     RoomsList
   }
 })
-export default class Home extends Vue {}
+export default class Home extends Vue {
+  private loading = false
+
+  async LoadRooms() {
+    this.loading = true
+
+    try {
+      await this.$store.dispatch('ROOMS_LOAD')
+    } finally {
+      this.loading = false
+    }
+  }
+}
 </script>