Feature: Add loading spinner for pins

pinry-spa/src/components/Pins.vue

@@ -50,6 +50,7 @@
           </template>
         </div>
       </div>
+      <loadingSpinner v-bind:show="status.loading"></loadingSpinner>
     </section>
   </div>
 </template>
@@ -58,6 +59,7 @@
 import API from './api';
 import pinHandler from './utils/PinHandler';
 import PinPreview from './PinPreview.vue';
+import loadingSpinner from './loadingSpinner.vue';
 
 function createImageItem(pin) {
   const image = {};
@@ -74,11 +76,17 @@ function createImageItem(pin) {
 
 export default {
   name: 'pins',
-  components: {},
+  components: {
+    loadingSpinner,
+  },
   data() {
     return {
       blocks: [],
+      status: {
+        loading: false,
+        hasNext: true,
         offset: 0,
+      },
     };
   },
   props: {
@@ -117,26 +125,34 @@ export default {
         },
       );
     },
-    fetchMore() {
+    fetchMore(created) {
       let promise;
+      if (!created) {
+        if (this.status.loading) {
+          return;
+        }
+      }
+      this.status.loading = true;
       if (this.pinFilters.tagFilter) {
-        promise = API.fetchPins(this.offset, this.pinFilters.tagFilter);
+        promise = API.fetchPins(this.status.offset, this.pinFilters.tagFilter);
       } else if (this.pinFilters.userFilter) {
-        promise = API.fetchPins(this.offset, null, this.pinFilters.userFilter);
+        promise = API.fetchPins(this.status.offset, null, this.pinFilters.userFilter);
       } else if (this.pinFilters.boardFilter) {
         promise = API.fetchPinsForBoard(this.pinFilters.boardFilter);
       } else {
-        promise = API.fetchPins(this.offset);
+        promise = API.fetchPins(this.status.offset);
       }
       promise.then(
         (resp) => {
           this.blocks = this.buildBlocks(resp.data.results);
+          this.status.loading = false;
         },
+        () => { this.status.loading = false; },
       );
     },
   },
   created() {
-    this.fetchMore();
+    this.fetchMore(true);
   },
 };
 </script>

pinry-spa/src/components/loadingSpinner.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="loading-spinner">
+    <div v-show="show" class="spinner">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'loadingSpinner',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* loading spinner */
+.spinner {
+    background: url('../assets/loader.gif');
+    background-position: center center;
+    background-repeat: no-repeat;
+    height: 31px;
+    margin: 0 auto;
+    padding: 50px;
+    width: 31px;
+}
+</style>