fix: resolve list shaking caused by display of Loading component

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>

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">

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>