From 9aad90045099a09de968c42090323cee8feafc5b Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 15 Oct 2023 00:55:12 +0800
Subject: [PATCH] refactor: refactor code when v-if & v-for are used together

---
 .../views/Home/components/Following.vue       | 42 ++++++++++---------
 .../views/Home/components/ForYou.vue          | 42 +++++++++----------
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 893f1e8d..4d89d7d7 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -100,29 +100,31 @@ function jumpToLoginPage() {
       />
 
       <!-- skeleton -->
-      <template v-for="item in 30" :key="item">
-        <div
-          v-if="isLoading"
-          mb-8 pointer-events-none select-none
-        >
-          <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
-          <div flex mt-4>
-            <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
-            <div w-full>
-              <div grid gap-2>
-                <div w-full h-5 bg="$bew-fill-3" />
-                <div w="3/4" h-5 bg="$bew-fill-3" />
-              </div>
-              <div grid gap-2 mt-4>
-                <div w="50%" h-4 bg="$bew-fill-2" />
-                <div w="80%" h-4 bg="$bew-fill-2" />
-              </div>
-              <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
-                hello world
+      <template v-if="isLoading">
+        <template v-for="item in 30" :key="item">
+          <div
+
+            mb-8 pointer-events-none select-none
+          >
+            <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+            <div flex mt-4>
+              <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
+              <div w-full>
+                <div grid gap-2>
+                  <div w-full h-5 bg="$bew-fill-3" />
+                  <div w="3/4" h-5 bg="$bew-fill-3" />
+                </div>
+                <div grid gap-2 mt-4>
+                  <div w="50%" h-4 bg="$bew-fill-2" />
+                  <div w="80%" h-4 bg="$bew-fill-2" />
+                </div>
+                <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+                  hello world
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </template>
       </template>
     </div>
 
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index b4e42152..d92d0dca 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -181,29 +181,30 @@ function jumpToLoginPage() {
       </template>
 
       <!-- skeleton -->
-      <template v-for="item in 30" :key="item">
-        <div
-          v-if="isLoading"
-          mb-8 pointer-events-none select-none
-        >
-          <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
-          <div flex mt-4>
-            <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
-            <div w-full>
-              <div grid gap-2>
-                <div w-full h-5 bg="$bew-fill-3" />
-                <div w="3/4" h-5 bg="$bew-fill-3" />
-              </div>
-              <div grid gap-2 mt-4>
-                <div w="50%" h-4 bg="$bew-fill-2" />
-                <div w="80%" h-4 bg="$bew-fill-2" />
-              </div>
-              <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
-                hello world
+      <template v-if="isLoading">
+        <template v-for="item in 30" :key="item">
+          <div
+            mb-8 pointer-events-none select-none
+          >
+            <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+            <div flex mt-4>
+              <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
+              <div w-full>
+                <div grid gap-2>
+                  <div w-full h-5 bg="$bew-fill-3" />
+                  <div w="3/4" h-5 bg="$bew-fill-3" />
+                </div>
+                <div grid gap-2 mt-4>
+                  <div w="50%" h-4 bg="$bew-fill-2" />
+                  <div w="80%" h-4 bg="$bew-fill-2" />
+                </div>
+                <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+                  hello world
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </template>
       </template>
     </div>
 
@@ -215,4 +216,3 @@ function jumpToLoginPage() {
 
 <style lang="scss" scoped>
 </style>
-../types