fix: pagination issues on home page

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

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");

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;
       }
     },
   },