perf(Home): improve home page performance (BewlyBewly#733)

* perf: solve the problem of high home page occupancy (BewlyBewly#732) * chore(Home): add keep alive again for `ForYou` page * style(Home): improve tab content loading animation --------- Co-authored-by: star knight <[email protected]>
MengNianxiaoyao · May 7, 2024 · 26d4cb1 · 26d4cb1
1 parent fef5d0e
commit 26d4cb1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git 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
@@ -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 }
 })