From 6f77f9acce8d0e935b53a8e482cb21b1326672b6 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 27 May 2024 18:30:06 +0800 Subject: [PATCH] perf: improve the scrolling performance --- src/components/VideoCard/VideoCard.vue | 9 +++------ src/contentScripts/views/App.vue | 3 +-- src/contentScripts/views/Home/Home.vue | 16 ++-------------- .../views/Home/components/Following.vue | 3 --- .../views/Home/components/ForYou.vue | 7 ------- .../views/Home/components/SubscribedSeries.vue | 3 --- .../views/Home/components/Trending.vue | 14 +++++++++----- 7 files changed, 15 insertions(+), 40 deletions(-) diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue index 0bbb2326..f477ac9c 100644 --- a/src/components/VideoCard/VideoCard.vue +++ b/src/components/VideoCard/VideoCard.vue @@ -232,7 +232,7 @@ function handleUndo() {
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 1405bdd6..476f19a5 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -35,7 +35,6 @@ const showTopBarMask = ref(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(false) @@ -221,7 +220,7 @@ function handleOsScroll() { } if (clientHeight + scrollTop >= scrollHeight - 150) - handleThrottledReachBottom() + handleReachBottom.value?.() if (isHomePage()) topBarRef.value?.handleScroll() diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue index 93280e46..16c0f608 100644 --- a/src/contentScripts/views/Home/Home.vue +++ b/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 } diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue index 9e4a4e54..2159f685 100644 --- a/src/contentScripts/views/Home/components/Following.vue +++ b/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 diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue index 6d8b97c8..560a7983 100644 --- a/src/contentScripts/views/Home/components/ForYou.vue +++ b/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 }) - -
diff --git a/src/contentScripts/views/Home/components/SubscribedSeries.vue b/src/contentScripts/views/Home/components/SubscribedSeries.vue index c8eb4982..268c041c 100644 --- a/src/contentScripts/views/Home/components/SubscribedSeries.vue +++ b/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 diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue index ee9706c2..1a9300a4 100644 --- a/src/contentScripts/views/Home/components/Trending.vue +++ b/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') } }