From 26d4cb17bb346f3063fa5c7b9846b3e2f02049fa Mon Sep 17 00:00:00 2001
From: hakadao <a578457889743@gmail.com>
Date: Tue, 7 May 2024 23:21:39 +0800
Subject: [PATCH] perf(Home): improve home page performance (#733)

* perf: solve the problem of high home page occupancy (#732)

* chore(Home): add keep alive again for `ForYou` page

* style(Home): improve tab content loading animation

---------

Co-authored-by: star knight <64941905+starknt@users.noreply.github.com>
---
 src/contentScripts/views/Home/Home.vue | 19 +++++++++----------
 src/stores/mainStore.ts                |  8 ++++----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index fc868e97..c558d14c 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -206,18 +206,18 @@ function toggleTabContentLoading(loading: boolean) {
             style="backdrop-filter: var(--bew-filter-glass-1)"
             px-4 lh-35px h-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
-            flex="~ gap-2 items-center" transform-gpu
+            flex="~ gap-2 items-center" relative
             @click="handleChangeTab(tab)"
           >
             <span class="text-center">{{ $t(tab.i18nKey) }}</span>
-            <Icon
-              :style="{
-                opacity: activatedPage === tab.page && tabContentLoading ? 1 : 0,
-                margin: activatedPage === tab.page && tabContentLoading ? '0' : '-12px',
-              }"
-              icon="svg-spinners:ring-resize"
-              duration-300 ease-in-out mb--2px text-16px
-            />
+
+            <Transition name="fade">
+              <svg-spinners:ring-resize
+                v-show="activatedPage === tab.page && tabContentLoading"
+                pos="absolute right-4px top-4px" duration-300
+                text="8px $bew-text-auto"
+              />
+            </Transition>
           </button>
         </section>
 
@@ -251,7 +251,6 @@ function toggleTabContentLoading(loading: boolean) {
           />
         </KeepAlive>
       </Transition>
-      <!-- <RecommendContent :key="recommendContentKey" /> -->
     </main>
   </div>
 </template>
diff --git a/src/stores/mainStore.ts b/src/stores/mainStore.ts
index d0d1e28c..7032b525 100644
--- a/src/stores/mainStore.ts
+++ b/src/stores/mainStore.ts
@@ -26,8 +26,8 @@ export const useMainStore = defineStore('main', () => {
     ]
   })
 
-  const homeTabs = computed((): HomeTab[] => {
-    return [
+  const homeTabs = shallowReadonly<HomeTab[]>(
+    [
       {
         i18nKey: 'home.for_you',
         page: HomeSubPage.ForYou,
@@ -48,8 +48,8 @@ export const useMainStore = defineStore('main', () => {
         i18nKey: 'home.ranking',
         page: HomeSubPage.Ranking,
       },
-    ]
-  })
+    ],
+  )
 
   return { dockItems, homeTabs }
 })