perf: improve the scrolling performance

src/contentScripts/views/App.vue

@@ -35,7 +35,6 @@ const showTopBarMask = ref<boolean>(false)
 const handlePageRefresh = ref<() => void>()
 const handleReachBottom = ref<() => void>()
 const handleThrottledPageRefresh = useThrottleFn(() => handlePageRefresh.value?.(), 500)
-const handleThrottledReachBottom = useThrottleFn(() => handleReachBottom.value?.(), 500)
 const handleThrottledBackToTop = useThrottleFn(() => handleBackToTop(), 1000)
 const topBarRef = ref()
 const reachTop = ref<boolean>(false)
@@ -221,7 +220,7 @@ function handleOsScroll() {
   }
 
   if (clientHeight + scrollTop >= scrollHeight - 150)
-    handleThrottledReachBottom()
+    handleReachBottom.value?.()
 
   if (isHomePage())
     topBarRef.value?.handleScroll()

src/contentScripts/views/Home/Home.vue

@@ -7,7 +7,6 @@ import { useBewlyApp } from '~/composables/useAppProvider'
 import { homePageGridLayout, settings } from '~/logic'
 import type { HomeTab } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
-import { delay } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 import type { GridLayoutIcon } from './types'
@@ -119,22 +118,11 @@ function handleChangeTab(tab: HomeTab) {
     handleThrottledBackToTop(settings.value.useSearchPageModeOnHomePage ? 510 : 0)
   }
 
-  // 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.page
+  activatedPage.value = tab.page
 }
 
 function toggleTabContentLoading(loading: boolean) {
-  nextTick(async () => {
-    // Delay the closing effect to prevent the transition effect from being too stiff
-    if (!loading)
-      await delay(500)
-    tabContentLoading.value = loading
-  })
+  tabContentLoading.value = loading
 }
 </script>
 

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

@@ -79,9 +79,6 @@ async function initData() {
 }
 
 async function getData() {
-  if (isLoading.value)
-    return
-
   emit('beforeLoading')
   isLoading.value = true
 

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

@@ -127,9 +127,6 @@ async function initData() {
 }
 
 async function getData() {
-  if (isLoading.value)
-    return
-
   emit('beforeLoading')
   isLoading.value = true
   try {
@@ -567,10 +564,6 @@ defineExpose({ initData })
 
     <!-- no more content -->
     <Empty v-if="noMoreContent" class="pb-4" :description="$t('common.no_more_content')" />
-
-    <!-- <Transition name="fade">
-      <Loading v-show="isLoading" />
-    </Transition> -->
   </div>
 </template>
 

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

@@ -64,9 +64,6 @@ async function initData() {
 }
 
 async function getData() {
-  if (isLoading.value)
-    return
-
   emit('beforeLoading')
   isLoading.value = true
 

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

@@ -54,7 +54,15 @@ async function initData() {
 }
 
 async function getData() {
-  await getTrendingVideos()
+  emit('beforeLoading')
+  isLoading.value = true
+  try {
+    await getTrendingVideos()
+  }
+  finally {
+    isLoading.value = false
+    emit('afterLoading')
+  }
 }
 
 function initPageAction() {
@@ -72,8 +80,6 @@ async function getTrendingVideos() {
   if (noMoreContent.value)
     return
 
-  emit('beforeLoading')
-  isLoading.value = true
   try {
     let i = 0
     // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L208
@@ -113,8 +119,6 @@ async function getTrendingVideos() {
   }
   finally {
     videoList.value = videoList.value.filter(video => video.item)
-    isLoading.value = false
-    emit('afterLoading')
   }
 }