From 5890a0280769aea22e0694048a83134f2a7dfe8b Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Thu, 28 Nov 2019 23:38:50 +0800
Subject: [PATCH] Feature: Add loading spinner for pins

---
 .../img => pinry-spa/src/assets}/loader.gif   | Bin
 pinry-spa/src/components/Pins.vue             |  30 +++++++++++++----
 pinry-spa/src/components/loadingSpinner.vue   |  31 ++++++++++++++++++
 3 files changed, 54 insertions(+), 7 deletions(-)
 rename {pinry/static/img => pinry-spa/src/assets}/loader.gif (100%)
 create mode 100644 pinry-spa/src/components/loadingSpinner.vue

diff --git a/pinry/static/img/loader.gif b/pinry-spa/src/assets/loader.gif
similarity index 100%
rename from pinry/static/img/loader.gif
rename to pinry-spa/src/assets/loader.gif
diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index f78bbbb..24d6e62 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/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: [],
-      offset: 0,
+      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>
diff --git a/pinry-spa/src/components/loadingSpinner.vue b/pinry-spa/src/components/loadingSpinner.vue
new file mode 100644
index 0000000..00e02b1
--- /dev/null
+++ b/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>