Adds loading indicator

Author: moay

assets/js/dashboard.js

@@ -13,6 +13,7 @@ let vm = new Vue({
     delimiters: ['${', '}'],
 
     data: {
+        dataLoaded: false,
         status: {},
         recipes: {},
         repoColors: {
@@ -77,6 +78,7 @@ let vm = new Vue({
             this.$http.get('ui/data').then((response) => {
                 this.status = response.body.status;
                 this.recipes = response.body.recipes;
+                this.dataLoaded = true;
             })
         },
         recipeUrl (recipe) {

…/build/dashboard.93b73cbfd99ca32ad3c4.js …/build/dashboard.f0867c6bf36ade70c00b.jspublic/build/dashboard.93b73cbfd99ca32ad3c4.js renamed to public/build/dashboard.f0867c6bf36ade70c00b.js public/build/dashboard.93b73cbfd99ca32ad3c4.js renamed to public/build/dashboard.f0867c6bf36ade70c00b.js

@@ -1,4 +1,4 @@
 {
   "build/dashboard.css": "/build/dashboard.b1963f9d56ce5d23c3b365942619a02a.css",
-  "build/dashboard.js": "/build/dashboard.93b73cbfd99ca32ad3c4.js"
+  "build/dashboard.js": "/build/dashboard.f0867c6bf36ade70c00b.js"
 }

public/build/manifest.json

@@ -37,6 +37,9 @@
 
                     <v-card light color="grey">
                         <v-card-text class="recipe-holder">
+                            <div class="text-xs-center" v-if="!dataLoaded">
+                                <v-progress-circular center :indeterminate="true" color="white" height="4"></v-progress-circular>
+                            </div>
                             <v-card
                                     light elevation-0
                                     class="recipe-holder__recipe"
@@ -105,4 +108,4 @@
 
 <script src="{{ asset('build/dashboard.js') }}"></script>
 </body>
-</html>
+</html>

templates/dashboard.html.twig

@@ -1,4 +1,4 @@
-<v-card color="grey">
+<v-card color="grey" v-if="dataLoaded">
     <v-list subheader class="repostatus" v-for="repo in activeRepos" :key="repo.slug">
         <v-toolbar light flat mini>
             <v-toolbar-title>${ repo.slug | capitalize } recipes repo</v-toolbar-title>
@@ -29,4 +29,4 @@
         </v-list-tile>
     </v-list>
     <v-divider></v-divider>
-</v-card>
+</v-card>