fix: unable to refresh data in some cases when changing the home tab

src/contentScripts/views/Home/Home.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-
 import type { HomeTab } from './types'
 import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
@@ -20,6 +19,7 @@ const pages = {
 }
 const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
+const tabContentLoading = ref<boolean>(false)
 
 const tabs = computed((): HomeTab[] => {
   return [
@@ -72,6 +72,16 @@ onMounted(() => {
 onUnmounted(() => {
   emitter.off('topBarVisibleChange')
 })
+
+function handleChangeTab(tab: HomeTab) {
+  // When the content of a tab is loading, prevent switching to another tab.
+  // Since `initPageAction()` within the tab replaces the `handleReachBottom` and `handlePageRefresh` functions.
+  // Therefore, this will lead to a failure in refreshing the data of the current tab
+  // because `handlePageRefresh` and `handleReachBottom` has been replaced
+  // now they are set to refresh the data of the tab you switched to
+  if (!tabContentLoading.value)
+    activatedPage.value = tab.value
+}
 </script>
 
 <template>
@@ -146,7 +156,8 @@ onUnmounted(() => {
             px-4 lh-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" backdrop-glass rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
             :class="{ 'tab-activated': activatedPage === tab.value }"
-            @click="activatedPage = tab.value"
+            :style="{ opacity: activatedPage !== tab.value && tabContentLoading ? 0.4 : 1 }"
+            @click="handleChangeTab(tab)"
           >
             <span class="text-center">{{ tab.label }}</span>
           </li>
@@ -155,7 +166,11 @@ onUnmounted(() => {
 
       <Transition name="page-fade">
         <KeepAlive include="ForYou">
-          <Component :is="pages[activatedPage]" :key="activatedPage" />
+          <Component
+            :is="pages[activatedPage]" :key="activatedPage"
+            @before-loading="tabContentLoading = true"
+            @after-loading="tabContentLoading = false"
+          />
         </KeepAlive>
       </Transition>
       <!-- <RecommendContent :key="recommendContentKey" /> -->

src/contentScripts/views/Home/components/Following.vue

@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const videoList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
@@ -54,6 +59,7 @@ async function getFollowedUsersVideos() {
     return
   }
 
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -94,6 +100,7 @@ async function getFollowedUsersVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 

src/contentScripts/views/Home/components/ForYou.vue

@@ -6,6 +6,11 @@ import { accessKey, settings } from '~/logic'
 import { LanguageType } from '~/enums/appEnums'
 import { TVAppKey } from '~/utils/authProvider'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const videoList = reactive<VideoItem[]>([])
 const appVideoList = reactive<AppVideoItem[]>([])
 const isLoading = ref<boolean>(true)
@@ -82,6 +87,7 @@ function initPageAction() {
 }
 
 async function getRecommendVideos() {
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: forYouResult = await browser.runtime.sendMessage({
@@ -116,10 +122,12 @@ async function getRecommendVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 
 async function getAppRecommendVideos() {
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: AppForYouResult = await browser.runtime.sendMessage({
@@ -155,6 +163,7 @@ async function getAppRecommendVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 

src/contentScripts/views/Home/components/Ranking.vue

@@ -6,6 +6,11 @@ import type { List as RankingPgcItem, RankingPgcResult } from '~/models/video/ra
 import { settings } from '~/logic'
 import emitter from '~/utils/mitt'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const { t } = useI18n()
 const { handleBackToTop, handlePageRefresh } = useBewlyApp()
 
@@ -94,6 +99,7 @@ onBeforeUnmount(() => {
 
 function getRankingVideos() {
   videoList.length = 0
+  emit('beforeLoading')
   isLoading.value = true
   browser.runtime.sendMessage({
     contentScriptQuery: 'getRankingVideos',
@@ -104,7 +110,10 @@ function getRankingVideos() {
       const { list } = response.data
       Object.assign(videoList, list)
     }
-  }).finally(() => isLoading.value = false)
+  }).finally(() => {
+    isLoading.value = false
+    emit('afterLoading')
+  })
 }
 
 function getRankingPgc() {

src/contentScripts/views/Home/components/SubscribedSeries.vue

@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const momentList = reactive<MomentItem[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
@@ -59,6 +64,7 @@ async function getFollowedUsersVideos() {
     return
   }
 
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: MomentResult = await browser.runtime.sendMessage({
@@ -99,6 +105,7 @@ async function getFollowedUsersVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 

src/contentScripts/views/Home/components/Trending.vue

@@ -2,6 +2,11 @@
 import type { Ref } from 'vue'
 import type { TrendingResult, List as VideoItem } from '~/models/video/trending'
 
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
 const videoList = reactive<VideoItem[]>([])
 const isLoading = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
@@ -32,6 +37,7 @@ function initPageAction() {
 }
 
 async function getTrendingVideos() {
+  emit('beforeLoading')
   isLoading.value = true
   try {
     const response: TrendingResult = await browser.runtime.sendMessage({
@@ -59,6 +65,7 @@ async function getTrendingVideos() {
   }
   finally {
     isLoading.value = false
+    emit('afterLoading')
   }
 }
 </script>