From b8e5fc086929c5506f69421e707e629d7af7bd47 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sun, 24 Apr 2022 20:05:36 +1200
Subject: [PATCH] fix: pagination issues on home page

---
 NUXT/components/Comments/mainCommentRenderer.vue |  2 +-
 NUXT/components/observer.vue                     |  4 ++--
 NUXT/pages/home.vue                              | 14 ++++++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index f4d282d..178423c 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -21,7 +21,7 @@
           v-if="getComponents()[Object.keys(comment)[0]]"
           :is="Object.keys(comment)[0]"
           :comment="comment[Object.keys(comment)[0]]"
-          @intersect="paginate()"
+          @intersect="paginate"
         ></component>
       </v-list-item>
       <v-divider
diff --git a/NUXT/components/observer.vue b/NUXT/components/observer.vue
index 6d752a0..af2373b 100644
--- a/NUXT/components/observer.vue
+++ b/NUXT/components/observer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="observer" />
+  <div class="observer" style="height: 1px" />
 </template>
 
 <script>
@@ -9,7 +9,7 @@ export default {
     observer: null,
   }),
   mounted() {
-    const options = this.options || {};
+    const options = this.options || { threshold: 0.0 };
     this.observer = new IntersectionObserver(([entry]) => {
       if (entry && entry.isIntersecting) {
         this.$emit("intersect");
diff --git a/NUXT/pages/home.vue b/NUXT/pages/home.vue
index 74a46c7..06b6cbf 100644
--- a/NUXT/pages/home.vue
+++ b/NUXT/pages/home.vue
@@ -11,8 +11,8 @@
     <div v-for="(section, index) in recommends" :key="index">
       <horizontal-list-renderer :render="section.contents[0]" />
     </div>
-    <vid-load-renderer v-if="!loading" :count="1" />
-    <observer @intersect="paginate" />
+    <vid-load-renderer v-if="loading" :count="1" />
+    <observer @intersect="paginate" v-else-if="recommends.length > 0" />
   </div>
 </template>
 
@@ -40,8 +40,12 @@ export default {
 
   methods: {
     paginate() {
-      if (this.recommends && !this.loading) {
-        this.loading = true;
+      this.loading = true;
+      const continuationCode = this.recommends[
+        this.recommends.length - 1
+      ].continuations.find((element) => element.nextContinuationData)
+        ?.nextContinuationData.continuation;
+      if (continuationCode) {
         this.$youtube
           .recommendContinuation(
             this.recommends[this.recommends.length - 1].continuations.find(
@@ -53,6 +57,8 @@ export default {
             this.loading = false;
             this.recommends.push(result);
           });
+      } else {
+        this.loading = false;
       }
     },
   },