add image loading with custom svg

Author: luke-hanwook

Diff for: src/components/InfiniteScrollView.vue

@@ -13,7 +13,8 @@ export default {
       pokeList: [],
       prev: "",
       next: "",
-      isLoading: false
+      isLoading: false,
+      page: 1
     };
   },
   created() {
@@ -22,6 +23,11 @@ export default {
   mounted() {
     this.scroll();
   },
+  watch: {
+    page(num) {
+      this.fetchData(this.next);
+    }
+  },
   methods: {
     fetchData(url = INITIAL_DOMAIN) {
       this.isLoading = true;
@@ -32,24 +38,24 @@ export default {
             this.prev = obj.prev;
             this.next = obj.next;
             this.pokeList = this.pokeList.concat(obj.list);
-          }, 500);
+          }, 600);
         })
         .finally(_ => {
           setTimeout(_ => {
             this.isLoading = false;
-          }, 500);
+          }, 600);
         });
     },
     scroll() {
-      window.onscroll = () => {
+      document.addEventListener("scroll", () => {
         let bottomOfWindow =
           document.documentElement.scrollTop + window.innerHeight ===
           document.documentElement.offsetHeight;
 
         if (bottomOfWindow) {
-          this.fetchData(this.next);
+          this.page++;
         }
-      };
+      });
     }
   }
 };

Diff for: src/components/InfiniteScrollViewByLibrary.vue

@@ -2,7 +2,7 @@
   <div
     v-infinite-scroll="fetchData"
     infinite-scroll-disabled="busy"
-    infinite-scroll-distance="500"
+    infinite-scroll-distance="1200"
   >
     <List :list="pokeList" />
   </div>
@@ -28,7 +28,6 @@ export default {
   methods: {
     fetchData(url = INITIAL_DOMAIN) {
       this.isLoading = true;
-      console.log(this.next);
       common
         .fetchList(this.next || url)
         .then(obj => {

Diff for: src/components/Loading.vue

@@ -1,9 +1,19 @@
 <template>
-  <div>Loding...</div>
+  <div class="loading-image-wrapper"><LoadingSvg1 class="loading-image" /></div>
 </template>
 
 <script>
-export default {};
+import LoadingSvg1 from "./svg/SvgLoading.vue";
+
+export default {
+  components: { LoadingSvg1 }
+};
 </script>
 
-<style></style>
+<style>
+.loading-image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

Diff for: src/components/MoreButtonView.vue

@@ -32,12 +32,12 @@ export default {
             this.prev = obj.prev;
             this.next = obj.next;
             this.pokeList = this.pokeList.concat(obj.list);
-          }, 200);
+          }, 600);
         })
         .finally(_ => {
           setTimeout(_ => {
             this.isLoading = false;
-          }, 200);
+          }, 600);
         });
     },
     onClickMoreBtn(e) {

Diff for: src/components/Pokemon.vue

@@ -29,7 +29,11 @@ export default {
       .then(data => {
         this.pokemon = data;
       })
-      .finally(_ => (this.isLoading = false));
+      .finally(_ => {
+        setTimeout(_ => {
+          this.isLoading = false;
+        }, 1200);
+      });
   }
 };
 </script>

Diff for: src/components/svg/SvgLoading.vue

@@ -0,0 +1,56 @@
+<template>
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    width="30px"
+    height="8px"
+    viewBox="0 0 30 8"
+    enable-background="new 0 0 30 8"
+    xml:space="preserve"
+  >
+    <rect x="0" y="0" width="8" height="8" fill="red" opacity=".2">
+      <animate
+        attributeName="opacity"
+        attributeType="XML"
+        values=".2 ; 1; .2"
+        begin="0s"
+        dur=".6s"
+        repeatCount="indefinite"
+        id="first"
+      />
+    </rect>
+
+    <rect x="10" y="0" width="8" height="8" fill="red" opacity=".2">
+      <animate
+        attributeName="opacity"
+        attributeType="XML"
+        values=".2 ; 1; .2"
+        begin="first.begin + .15s"
+        dur=".6s"
+        repeatCount="indefinite"
+        id="second"
+      />
+    </rect>
+
+    <rect x="20" y="0" width="8" height="8" fill="red" opacity=".2">
+      <animate
+        attributeName="opacity"
+        attributeType="XML"
+        values=".2 ; 1; .2"
+        begin="second.begin + .15s"
+        dur=".6s"
+        repeatCount="indefinite"
+        id="third"
+      />
+    </rect>
+  </svg>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>