:recycle: setting intersection observer in component state

vue-theme/src/pages/list.vue

@@ -48,7 +48,9 @@ export default {
         return {
             page: 0,
             perPage: 6,
-            keepFetching: true 
+            observer: null,
+            keepFetching: true,
+            isFetching: false
         }
     },
     computed: {
@@ -83,7 +85,7 @@ export default {
 
             console.warn(`loading more ${type} posts...`)
             this.page++
-            this.getPosts()
+            await this.getPosts()
         },
         _getSortBy() {
             return this.sortBy
@@ -146,19 +148,30 @@ export default {
             const footerEl = document.querySelector(".footer-wrapper footer")
             // console.warn('attach to: ',footerEl)
             if(!footerEl) return
-
-            window.addEventListener("load", e => {
-                const onIntersection = () => {
-                    console.log('intersected...')
-                    this.loadMorePosts()
-                    console.log('loaded...', this.loadMorePosts)
-                    console.log('cb this:', this)
-                }
-                const observer = new IntersectionObserver(onIntersection, {
-                    rootMargin: "0px 0px -20px 0px",
+            const onIntersect = entries => {
+                if(this.isFetching) return
+                
+                this.isFetching = true
+                entries.forEach(({ target, isIntersecting }) => {
+                    if (!isIntersecting) return
+                    this.observer.unobserve(target)
+                    
+                    setTimeout(() => {
+                        console.log("intersected:", target)
+                    }, 1000)
                 })
-                observer.observe(footerEl)
-            }, false)
+                this.isFetching = false
+                // this.loadMorePosts()
+                // console.log('loaded...', this.loadMorePosts)
+                // console.log('cb this:', this)
+            }
+            this.observer = new IntersectionObserver(
+                onIntersect,
+                {
+                    root: this.$el,
+                    threshold: 1.0,
+                }
+            )
         },
         unsetIntersectionLoader(type) {
             if(!type) return console.error('cannot unset intersection handler for undefined type...')
@@ -179,8 +192,6 @@ export default {
         // This only fires navigating from
         // a list page, to another list page
         type(newType, oldType){
-            this.unsetIntersectionLoader(oldType)
-            
             console.log('old:', oldType)
             console.log('new:', newType)
             
@@ -192,6 +203,9 @@ export default {
     mounted() {
         this.clearAndInitPostList()
         this.setIntersectionLoader()
+    },
+    beforeDestroy() {
+        this.observer.disconnect()
     }
 }
 </script>