From 649aad7a89d6d512b0ae70dce79fd622d8e88fc3 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 1 Nov 2022 15:15:12 +0000
Subject: [PATCH] Implement better handling of channel page loading.

---
 src/components/ChannelPage.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 8595483c..3edd0a01 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -142,7 +142,13 @@ export default {
                 });
         },
         handleScroll() {
-            if (this.loading || !this.channel || !this.channel.nextpage) return;
+            if (
+                this.loading ||
+                !this.channel ||
+                !this.channel.nextpage ||
+                (this.selectedTab != 0 && !this.tabs[this.selectedTab].tabNextPage)
+            )
+                return;
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
                 this.loading = true;
                 if (this.selectedTab == 0) {
@@ -165,11 +171,12 @@ export default {
         fetchChannelTabNextPage() {
             this.fetchJson(this.apiUrl() + "/channels/tabs", {
                 data: this.tabs[this.selectedTab].data,
-                nextpage: this.tabNextPage,
+                nextpage: this.tabs[this.selectedTab].tabNextPage,
             }).then(json => {
-                this.tabNextPage = json.nextpage;
+                this.tabs[this.selectedTab].tabNextPage = json.nextpage;
                 this.loading = false;
                 json.content.map(item => this.contentItems.push(item));
+                this.tabs[this.selectedTab].content = this.contentItems;
             });
         },
         subscribeHandler() {
@@ -216,11 +223,15 @@ export default {
                 this.contentItems = this.channel.relatedStreams;
                 return;
             }
+            if (this.tabs[index].content) {
+                this.contentItems = this.tabs[index].content;
+                return;
+            }
             this.fetchJson(this.apiUrl() + "/channels/tabs", {
                 data: this.tabs[index].data,
             }).then(tab => {
-                this.contentItems = tab.content;
-                this.tabNextPage = tab.nextpage;
+                this.contentItems = this.tabs[index].content = tab.content;
+                this.tabs[this.selectedTab].tabNextPage = tab.nextpage;
             });
         },
     },