From 4c36e83cd873e33f6315c766268a630b2aa569f1 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sat, 1 Apr 2023 02:22:26 +0800
Subject: [PATCH] fix: resolve list shaking caused by display of `Loading`
 component

---
 src/components/Topbar/TopbarFavoritesPop.vue  | 12 +++++-----
 src/components/Topbar/TopbarHistoryPop.vue    |  4 +++-
 src/components/Topbar/TopbarMomentsPop.vue    |  4 +++-
 src/contentScripts/views/App.vue              | 22 ++++++++++---------
 src/contentScripts/views/History/History.vue  | 10 +++++----
 .../Home/components/RecommendContent.vue      |  4 +++-
 6 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/Topbar/TopbarFavoritesPop.vue b/src/components/Topbar/TopbarFavoritesPop.vue
index cb60ebcd..fb54a971 100644
--- a/src/components/Topbar/TopbarFavoritesPop.vue
+++ b/src/components/Topbar/TopbarFavoritesPop.vue
@@ -159,11 +159,11 @@ function scrollToTop(element: HTMLElement, duration: number) {
   >
     <!-- top bar -->
     <header
-      flex="~"
-      justify="between"
-      p="y-4 x-6"
+      flex="~" items-center justify-between
+      p="x-6"
       pos="fixed top-0 left-0"
       w="full"
+      h-50px
       bg="$bew-content-1"
       z="2"
       un-border="!rounded-t-$bew-radius"
@@ -192,7 +192,7 @@ function scrollToTop(element: HTMLElement, duration: number) {
             :key="item.id"
             :class="activatedMediaId === item.id ? 'activated-category' : ''"
             p="y-2 x-6"
-            first:m="t-[45.5px]"
+            first:m="t-[50px]"
             cursor="pointer"
             transition="~ duration-300"
             @click="changeCategory(item)"
@@ -295,7 +295,9 @@ function scrollToTop(element: HTMLElement, duration: number) {
         </TransitionGroup>
 
         <!-- loading -->
-        <Loading v-if="isLoading && favoriteResources.length !== 0" m="-t-4" />
+        <Transition name="fade">
+          <Loading v-if="isLoading && favoriteResources.length !== 0" m="-t-4" />
+        </Transition>
       </div>
     </main>
   </div>
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index 8255126b..ee6bb718 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -398,7 +398,9 @@ function scrollToTop(element: HTMLElement, duration: number) {
         </transition-group>
 
         <!-- loading -->
-        <loading v-if="isLoading && historys.length !== 0" m="-t-4" />
+        <Transition name="fade">
+          <loading v-if="isLoading && historys.length !== 0" m="-t-4" />
+        </Transition>
       </div>
     </main>
   </div>
diff --git a/src/components/Topbar/TopbarMomentsPop.vue b/src/components/Topbar/TopbarMomentsPop.vue
index 3205001a..5d77bfca 100644
--- a/src/components/Topbar/TopbarMomentsPop.vue
+++ b/src/components/Topbar/TopbarMomentsPop.vue
@@ -420,7 +420,9 @@ function scrollToTop(element: HTMLElement, duration: number) {
         </transition-group>
 
         <!-- loading -->
-        <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
+        <Transition name="fade">
+          <loading v-if="isLoading && moments.length !== 0" m="-t-4" />
+        </Transition>
       </div>
     </main>
   </div>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index c6e7aeaa..ec0ce6a7 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -233,16 +233,6 @@ function setAppAppearance() {
   --at-apply: opacity-0 transform -translate-y-full;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  --at-apply: opacity-0;
-}
-
 .dock-wrap {
   &.left {
     --at-apply: left-0;
@@ -304,3 +294,15 @@ function setAppAppearance() {
   }
 }
 </style>
+
+<style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  --at-apply: opacity-0;
+}
+</style>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 18d27a6e..81f389ef 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -475,10 +475,12 @@ function jumpToLoginPage() {
         </a>
       </transition-group>
       <!-- loading -->
-      <loading
-        v-if="isLoading && historyList.length !== 0 && !noMoreContent"
-        m="-t-4"
-      />
+      <Transition name="fade">
+        <loading
+          v-if="isLoading && historyList.length !== 0 && !noMoreContent"
+          m="-t-4"
+        />
+      </Transition>
     </main>
 
     <aside relative w="full md:40% lg:30% xl:25%" order="1 md:2 lg:2">
diff --git a/src/contentScripts/views/Home/components/RecommendContent.vue b/src/contentScripts/views/Home/components/RecommendContent.vue
index 8c9b2f09..7689d410 100644
--- a/src/contentScripts/views/Home/components/RecommendContent.vue
+++ b/src/contentScripts/views/Home/components/RecommendContent.vue
@@ -100,7 +100,9 @@ function jumpToLoginPage() {
     </TransitionGroup>
   </div>
 
-  <Loading v-if="isLoading" />
+  <Transition name="fade">
+    <Loading v-if="isLoading" />
+  </Transition>
 </template>
 
 <style lang="scss" scoped>