From e3219cb888ed925422f30ada12dc0651c3e67f8f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 17 Oct 2023 01:30:56 +0800
Subject: [PATCH] refactor: reduce code duplication by using the
 `VideoCardSkeleton`

---
 .../views/Home/components/Following.vue       | 25 +----------
 .../views/Home/components/ForYou.vue          | 24 +----------
 .../views/Home/components/Trending.vue        | 42 +------------------
 3 files changed, 3 insertions(+), 88 deletions(-)

diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 4d89d7d7..076ded81 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -101,30 +101,7 @@ function jumpToLoginPage() {
 
       <!-- skeleton -->
       <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>
-        </template>
+        <VideoCardSkeleton v-for="item in 30" :key="item" />
       </template>
     </div>
 
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index 4b6da190..5e333043 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -182,29 +182,7 @@ function jumpToLoginPage() {
 
       <!-- skeleton -->
       <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>
-        </template>
+        <VideoCardSkeleton v-for="item in 30" :key="item" />
       </template>
     </div>
 
diff --git a/src/contentScripts/views/Home/components/Trending.vue b/src/contentScripts/views/Home/components/Trending.vue
index 9309231b..4c3bce44 100644
--- a/src/contentScripts/views/Home/components/Trending.vue
+++ b/src/contentScripts/views/Home/components/Trending.vue
@@ -83,47 +83,7 @@ async function getFollowingAuthorVideos() {
 
       <!-- skeleton -->
       <template v-if="isLoading">
-        <template v-for="item in 30" :key="item">
-          <div
-
-            :style="{
-              display: 'flex',
-              gap: '1.5rem',
-            }"
-            mb-10 pointer-events-none select-none
-          >
-            <!-- Cover -->
-            <div :style="{ width: '250px' }" shrink-0 aspect-video h-fit bg="$bew-fill-4" rounded="$bew-radius" />
-            <!-- Other Information -->
-            <div
-              :style="{
-                width: '100%',
-                marginTop: '0'
-              }"
-              flex="~ gap-4"
-            >
-              <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 :style="{ width: '70%' }" h-4 bg="$bew-fill-2" />
-                  <div w="80%" h-4 bg="$bew-fill-2" />
-                </div>
-
-                <div mt-4 flex>
-                  <div v-if="item % 3 !== 0" mr-2 text="transparent sm" inline-block p="x-2 y-1" bg="$bew-fill-1" rounded-4>
-                    hello world
-                  </div>
-                  <div text="transparent sm" inline-block p="x-2 y-1" bg="$bew-fill-1" rounded-4>
-                    hello world
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
+        <VideoCardSkeleton v-for="item in 30" :key="item" horizontal />
       </template>
     </div>