From 72fabc6d12230c5a488cf83f866d0395bb11a349 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 11 Mar 2026 23:02:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E4=BC=98=E5=8C=96=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=B1=8F=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=94=A8=E6=88=B7=E9=A1=B5=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E9=BB=91=E8=89=B2=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 关键布局组件(AppMenu/TitleBar/SearchBar)改为同步导入，消除加载闪烁
- 新增全局 skeleton-shimmer 流光动画替代 animate-pulse 闪烁效果
- 用户页 loading 骨架屏避免使用 .left scoped 样式导致的深色背景
- 全部 n-skeleton 组件替换为原生 div + shimmer，统一圆角风格
- 菜单容器添加背景色防止加载穿透
---
 src/renderer/index.css                        | 40 +++++++++++++++++++
 src/renderer/layout/AppLayout.vue             | 10 +++--
 src/renderer/layout/MobileLayout.vue          |  3 +-
 src/renderer/views/album/index.vue            |  8 ++--
 src/renderer/views/artist/detail.vue          | 22 +++++-----
 .../home/components/HomeAlbumSection.vue      |  6 +--
 .../views/home/components/HomeArtists.vue     |  8 ++--
 .../views/home/components/HomeCard.vue        |  2 +-
 .../home/components/HomeDailyRecommend.vue    |  2 +-
 .../views/home/components/HomeHero.vue        | 10 ++---
 .../views/home/components/HomeNewSongs.vue    |  6 +--
 .../home/components/HomePlaylistSection.vue   |  6 +--
 .../home/components/HomePrivateContent.vue    |  2 +-
 src/renderer/views/list/index.vue             |  6 +--
 src/renderer/views/mv/index.vue               |  8 ++--
 src/renderer/views/podcast/index.vue          | 16 +++-----
 src/renderer/views/search/SearchResult.vue    |  6 +--
 src/renderer/views/toplist/index.vue          |  8 ++--
 src/renderer/views/user/detail.vue            | 24 ++++++-----
 src/renderer/views/user/followers.vue         |  8 ++--
 src/renderer/views/user/follows.vue           |  8 ++--
 src/renderer/views/user/index.vue             | 34 ++++++++--------
 22 files changed, 133 insertions(+), 110 deletions(-)

diff --git a/src/renderer/index.css b/src/renderer/index.css
index 1af7489..ffa64ea 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -136,3 +136,43 @@
     font-size: 2.25rem;
   }
 }
+
+/* 骨架屏 shimmer 动画 */
+.skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+  background: #e5e7eb;
+}
+
+.skeleton-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s infinite;
+  transform: translateX(-100%);
+}
+
+:root.dark .skeleton-shimmer {
+  background: #262626;
+}
+
+:root.dark .skeleton-shimmer::after {
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.06) 50%,
+    transparent 100%
+  );
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
diff --git a/src/renderer/layout/AppLayout.vue b/src/renderer/layout/AppLayout.vue
index 8b7f895..0e3a1c9 100644
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -69,6 +69,10 @@ import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';
 
+// 关键布局组件同步导入（始终可见，避免加载闪烁）
+import AppMenu from './components/AppMenu.vue';
+import SearchBar from './components/SearchBar.vue';
+import TitleBar from './components/TitleBar.vue';
 // 移动端专用布局
 import MobileLayout from './MobileLayout.vue';
 
@@ -87,11 +91,9 @@ const keepAliveInclude = computed(() => {
     .filter(Boolean);
 });
 
-const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
+// 非关键组件保持异步加载
 const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.vue'));
 const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
-const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
-const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
 const PlayingListDrawer = defineAsyncComponent(
   () => import('@/components/player/PlayingListDrawer.vue')
 );
@@ -151,7 +153,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
 }
 
 .menu {
-  @apply h-full;
+  @apply h-full bg-light dark:bg-black;
 }
 
 .main {
diff --git a/src/renderer/layout/MobileLayout.vue b/src/renderer/layout/MobileLayout.vue
index ea503f2..d3f73d0 100644
--- a/src/renderer/layout/MobileLayout.vue
+++ b/src/renderer/layout/MobileLayout.vue
@@ -37,9 +37,8 @@ import otherRouter from '@/router/other';
 import { useMenuStore } from '@/store/modules/menu';
 import { usePlayerStore } from '@/store/modules/player';
 
+import AppMenu from './components/AppMenu.vue';
 import MobileHeader from './components/MobileHeader.vue';
-
-const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
 const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
 const PlayingListDrawer = defineAsyncComponent(
   () => import('@/components/player/PlayingListDrawer.vue')
diff --git a/src/renderer/views/album/index.vue b/src/renderer/views/album/index.vue
index 2c326b3..60a0021 100644
--- a/src/renderer/views/album/index.vue
+++ b/src/renderer/views/album/index.vue
@@ -30,11 +30,9 @@
           <!-- Loading State -->
           <template v-if="loading && page === 0">
             <div v-for="i in 15" :key="`loading-${i}`" class="space-y-3">
-              <div
-                class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-              />
-              <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-              <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              <div class="aspect-square skeleton-shimmer rounded-2xl" />
+              <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+              <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
             </div>
           </template>
 
diff --git a/src/renderer/views/artist/detail.vue b/src/renderer/views/artist/detail.vue
index 26a4477..793090a 100644
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -9,17 +9,19 @@
           <!-- Hero Skeleton -->
           <div class="hero-section relative h-[400px] overflow-hidden rounded-tl-2xl">
             <div class="hero-bg absolute inset-0 -top-20">
-              <div class="absolute inset-0 bg-neutral-200 dark:bg-neutral-800" />
+              <div class="absolute inset-0 skeleton-shimmer" />
             </div>
             <div class="hero-content relative z-10 px-4 pb-6 pt-4 md:px-8 md:pt-8">
               <div class="flex flex-col items-center gap-6 md:flex-row md:items-end md:gap-10">
-                <n-skeleton class="h-36 w-36 rounded-full md:h-48 md:w-48" />
+                <div
+                  class="h-36 w-36 md:h-48 md:w-48 skeleton-shimmer rounded-full flex-shrink-0"
+                />
                 <div class="flex-1 space-y-4 text-center md:text-left">
-                  <n-skeleton class="h-6 w-20 rounded-full" />
-                  <n-skeleton class="h-10 w-1/2 md:h-12" />
+                  <div class="h-6 w-20 skeleton-shimmer rounded-full" />
+                  <div class="h-10 w-1/2 md:h-12 skeleton-shimmer rounded-xl" />
                   <div class="flex justify-center gap-4 md:justify-start">
-                    <n-skeleton class="h-6 w-24" />
-                    <n-skeleton class="h-6 w-24" />
+                    <div class="h-6 w-24 skeleton-shimmer rounded-lg" />
+                    <div class="h-6 w-24 skeleton-shimmer rounded-lg" />
                   </div>
                 </div>
               </div>
@@ -29,12 +31,12 @@
           <div class="mt-8 page-padding-x">
             <div class="space-y-4">
               <div v-for="i in 8" :key="i" class="flex items-center gap-4">
-                <n-skeleton class="h-12 w-12 rounded-xl" />
+                <div class="h-12 w-12 skeleton-shimmer rounded-xl flex-shrink-0" />
                 <div class="flex-1 space-y-2">
-                  <n-skeleton text class="w-1/3" />
-                  <n-skeleton text class="w-1/4" />
+                  <div class="h-4 w-1/3 skeleton-shimmer rounded-lg" />
+                  <div class="h-3 w-1/4 skeleton-shimmer rounded-lg" />
                 </div>
-                <n-skeleton class="h-8 w-8 rounded-full" />
+                <div class="h-8 w-8 skeleton-shimmer rounded-full flex-shrink-0" />
               </div>
             </div>
           </div>
diff --git a/src/renderer/views/home/components/HomeAlbumSection.vue b/src/renderer/views/home/components/HomeAlbumSection.vue
index 3b2f205..7ff739c 100644
--- a/src/renderer/views/home/components/HomeAlbumSection.vue
+++ b/src/renderer/views/home/components/HomeAlbumSection.vue
@@ -20,9 +20,9 @@
     <!-- Loading Skeleton -->
     <div v-if="loading" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
       <div v-for="i in displayCount" :key="i" class="space-y-3">
-        <div class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800" />
-        <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-        <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+        <div class="aspect-square skeleton-shimmer rounded-2xl" />
+        <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+        <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
       </div>
     </div>
 
diff --git a/src/renderer/views/home/components/HomeArtists.vue b/src/renderer/views/home/components/HomeArtists.vue
index 55f4b62..cfad5bf 100644
--- a/src/renderer/views/home/components/HomeArtists.vue
+++ b/src/renderer/views/home/components/HomeArtists.vue
@@ -2,11 +2,9 @@
   <section class="artists-section">
     <!-- Loading Skeleton -->
     <div v-if="loading" class="artists-scroll flex gap-6 md:gap-8 overflow-x-hidden pb-4">
-      <div v-for="i in 8" :key="i" class="artist-skeleton flex flex-col items-center gap-3">
-        <div
-          class="h-20 w-20 md:h-24 md:w-24 lg:h-28 lg:w-28 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-800"
-        />
-        <div class="h-3 w-16 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
+      <div v-for="i in 8" :key="i" class="flex flex-col items-center gap-3">
+        <div class="h-20 w-20 md:h-24 md:w-24 lg:h-28 lg:w-28 skeleton-shimmer rounded-full" />
+        <div class="h-3 w-16 skeleton-shimmer rounded-lg" />
       </div>
     </div>
 
diff --git a/src/renderer/views/home/components/HomeCard.vue b/src/renderer/views/home/components/HomeCard.vue
index 705f54a..5265dfb 100644
--- a/src/renderer/views/home/components/HomeCard.vue
+++ b/src/renderer/views/home/components/HomeCard.vue
@@ -12,7 +12,7 @@
         class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
         loading="lazy"
       />
-      <div v-else class="h-full w-full animate-pulse bg-neutral-200 dark:bg-neutral-800" />
+      <div v-else class="h-full w-full skeleton-shimmer" />
 
       <!-- 播放按钮遮罩 (Apple Music 风格) -->
       <div
diff --git a/src/renderer/views/home/components/HomeDailyRecommend.vue b/src/renderer/views/home/components/HomeDailyRecommend.vue
index e21d0ca..8bf890c 100644
--- a/src/renderer/views/home/components/HomeDailyRecommend.vue
+++ b/src/renderer/views/home/components/HomeDailyRecommend.vue
@@ -29,7 +29,7 @@
       <div
         v-for="i in 12"
         :key="i"
-        class="skeleton-item aspect-square animate-pulse rounded-2xl md:rounded-3xl bg-neutral-100 dark:bg-neutral-800/50"
+        class="aspect-square skeleton-shimmer rounded-2xl md:rounded-3xl"
       />
     </div>
 
diff --git a/src/renderer/views/home/components/HomeHero.vue b/src/renderer/views/home/components/HomeHero.vue
index 6bedd59..b505d37 100644
--- a/src/renderer/views/home/components/HomeHero.vue
+++ b/src/renderer/views/home/components/HomeHero.vue
@@ -6,16 +6,12 @@
         <div
           v-for="i in 6"
           :key="i"
-          class="skeleton-pill h-10 w-24 flex-shrink-0 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-800"
+          class="h-10 w-24 flex-shrink-0 skeleton-shimmer rounded-full"
         />
       </div>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <div
-          class="skeleton-card aspect-[2.2/1] animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-        />
-        <div
-          class="skeleton-card aspect-[2.2/1] animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-        />
+        <div class="aspect-[2.2/1] skeleton-shimmer rounded-2xl" />
+        <div class="aspect-[2.2/1] skeleton-shimmer rounded-2xl" />
       </div>
     </div>
 
diff --git a/src/renderer/views/home/components/HomeNewSongs.vue b/src/renderer/views/home/components/HomeNewSongs.vue
index afb5e20..2299134 100644
--- a/src/renderer/views/home/components/HomeNewSongs.vue
+++ b/src/renderer/views/home/components/HomeNewSongs.vue
@@ -19,11 +19,7 @@
 
     <!-- Loading Skeleton -->
     <div v-if="loading" class="songs-grid grid gap-3" :class="gridClass">
-      <div
-        v-for="i in 10"
-        :key="i"
-        class="skeleton-item h-20 animate-pulse rounded-xl md:rounded-2xl bg-neutral-100 dark:bg-neutral-800/50"
-      />
+      <div v-for="i in 10" :key="i" class="h-20 skeleton-shimmer rounded-xl md:rounded-2xl" />
     </div>
 
     <!-- Songs Grid (Even columns: 1→2→3→4→5) -->
diff --git a/src/renderer/views/home/components/HomePlaylistSection.vue b/src/renderer/views/home/components/HomePlaylistSection.vue
index bf5ad13..e8867ae 100644
--- a/src/renderer/views/home/components/HomePlaylistSection.vue
+++ b/src/renderer/views/home/components/HomePlaylistSection.vue
@@ -20,9 +20,9 @@
     <!-- Loading Skeleton -->
     <div v-if="loading" class="grid gap-6" :style="gridStyle">
       <div v-for="i in displayCount" :key="i" class="space-y-3">
-        <div class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800" />
-        <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-        <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+        <div class="aspect-square skeleton-shimmer rounded-2xl" />
+        <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+        <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
       </div>
     </div>
 
diff --git a/src/renderer/views/home/components/HomePrivateContent.vue b/src/renderer/views/home/components/HomePrivateContent.vue
index f0a3371..313655b 100644
--- a/src/renderer/views/home/components/HomePrivateContent.vue
+++ b/src/renderer/views/home/components/HomePrivateContent.vue
@@ -18,7 +18,7 @@
       <div
         v-for="i in 3"
         :key="i"
-        class="skeleton-item animate-pulse rounded-2xl md:rounded-3xl bg-neutral-100 dark:bg-neutral-800/50"
+        class="skeleton-shimmer rounded-2xl md:rounded-3xl"
         style="aspect-ratio: 16/9"
       />
     </div>
diff --git a/src/renderer/views/list/index.vue b/src/renderer/views/list/index.vue
index da1819e..656207b 100644
--- a/src/renderer/views/list/index.vue
+++ b/src/renderer/views/list/index.vue
@@ -30,10 +30,8 @@
           <!-- Loading State -->
           <template v-if="loading && page === 0">
             <div v-for="i in 15" :key="`loading-${i}`" class="space-y-3">
-              <div
-                class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-              />
-              <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              <div class="aspect-square skeleton-shimmer rounded-2xl" />
+              <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
             </div>
           </template>
 
diff --git a/src/renderer/views/mv/index.vue b/src/renderer/views/mv/index.vue
index 717ec6a..40a135d 100644
--- a/src/renderer/views/mv/index.vue
+++ b/src/renderer/views/mv/index.vue
@@ -31,11 +31,9 @@
           <!-- Loading State -->
           <div v-if="initLoading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             <div v-for="i in 12" :key="i" class="space-y-3">
-              <div
-                class="aspect-video animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-              />
-              <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-              <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              <div class="aspect-video skeleton-shimmer rounded-2xl" />
+              <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+              <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
             </div>
           </div>
 
diff --git a/src/renderer/views/podcast/index.vue b/src/renderer/views/podcast/index.vue
index 7b4cf44..590de08 100644
--- a/src/renderer/views/podcast/index.vue
+++ b/src/renderer/views/podcast/index.vue
@@ -193,11 +193,9 @@
                 class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"
               >
                 <div v-for="i in 10" :key="`skeleton-${i}`" class="space-y-3">
-                  <div
-                    class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-                  />
-                  <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-                  <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+                  <div class="aspect-square skeleton-shimmer rounded-2xl" />
+                  <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+                  <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
                 </div>
               </div>
 
@@ -234,11 +232,9 @@
           <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
             <template v-if="categoryLoading && categoryPage === 0">
               <div v-for="i in 15" :key="`loading-${i}`" class="space-y-3">
-                <div
-                  class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-                />
-                <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-                <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+                <div class="aspect-square skeleton-shimmer rounded-2xl" />
+                <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+                <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
               </div>
             </template>
 
diff --git a/src/renderer/views/search/SearchResult.vue b/src/renderer/views/search/SearchResult.vue
index 567b7e6..551c80e 100644
--- a/src/renderer/views/search/SearchResult.vue
+++ b/src/renderer/views/search/SearchResult.vue
@@ -117,10 +117,8 @@
               class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
             >
               <div v-for="i in 12" :key="i" class="space-y-3">
-                <div
-                  class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-                />
-                <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+                <div class="aspect-square skeleton-shimmer rounded-2xl" />
+                <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
               </div>
             </div>
 
diff --git a/src/renderer/views/toplist/index.vue b/src/renderer/views/toplist/index.vue
index 2090613..09944c9 100644
--- a/src/renderer/views/toplist/index.vue
+++ b/src/renderer/views/toplist/index.vue
@@ -19,11 +19,9 @@
           <!-- Loading State -->
           <div v-if="loading" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
             <div v-for="i in 15" :key="i" class="space-y-3">
-              <div
-                class="aspect-square animate-pulse rounded-2xl bg-neutral-200 dark:bg-neutral-800"
-              />
-              <div class="h-4 w-3/4 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
-              <div class="h-3 w-1/2 animate-pulse rounded bg-neutral-200 dark:bg-neutral-800" />
+              <div class="aspect-square skeleton-shimmer rounded-2xl" />
+              <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+              <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
             </div>
           </div>
 
diff --git a/src/renderer/views/user/detail.vue b/src/renderer/views/user/detail.vue
index 63e057f..a8d76cf 100644
--- a/src/renderer/views/user/detail.vue
+++ b/src/renderer/views/user/detail.vue
@@ -6,30 +6,32 @@
         <div v-if="loading">
           <!-- Hero Skeleton -->
           <div class="relative h-[300px] overflow-hidden rounded-tl-2xl">
-            <div class="absolute inset-0 bg-neutral-200 dark:bg-neutral-800" />
+            <div class="absolute inset-0 skeleton-shimmer" />
             <div class="relative z-10 page-padding-x pt-8 pb-6">
               <div class="flex flex-col items-center gap-6 md:flex-row md:items-end md:gap-10">
-                <n-skeleton class="h-28 w-28 rounded-full md:h-40 md:w-40" />
+                <div
+                  class="h-28 w-28 md:h-40 md:w-40 skeleton-shimmer rounded-full flex-shrink-0"
+                />
                 <div class="flex-1 space-y-4 text-center md:text-left">
-                  <n-skeleton class="h-8 w-40" />
+                  <div class="h-8 w-40 skeleton-shimmer rounded-xl" />
                   <div class="flex justify-center gap-6 md:justify-start">
-                    <n-skeleton class="h-12 w-16" />
-                    <n-skeleton class="h-12 w-16" />
-                    <n-skeleton class="h-12 w-16" />
+                    <div class="h-12 w-16 skeleton-shimmer rounded-xl" />
+                    <div class="h-12 w-16 skeleton-shimmer rounded-xl" />
+                    <div class="h-12 w-16 skeleton-shimmer rounded-xl" />
                   </div>
-                  <n-skeleton class="h-4 w-2/3" />
+                  <div class="h-4 w-2/3 skeleton-shimmer rounded-lg" />
                 </div>
               </div>
             </div>
           </div>
           <!-- Content Skeleton -->
           <div class="mt-8 page-padding-x">
-            <n-skeleton class="h-10 w-48 mb-6" />
+            <div class="h-10 w-48 mb-6 skeleton-shimmer rounded-xl" />
             <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
               <div v-for="i in 10" :key="i" class="space-y-2">
-                <n-skeleton class="aspect-square w-full rounded-2xl" />
-                <n-skeleton text class="w-3/4" />
-                <n-skeleton text class="w-1/2" />
+                <div class="aspect-square w-full skeleton-shimmer rounded-2xl" />
+                <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
+                <div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
               </div>
             </div>
           </div>
diff --git a/src/renderer/views/user/followers.vue b/src/renderer/views/user/followers.vue
index 4439a59..edd422e 100644
--- a/src/renderer/views/user/followers.vue
+++ b/src/renderer/views/user/followers.vue
@@ -5,14 +5,14 @@
         <!-- Loading State -->
         <div v-if="followerListLoading && followerList.length === 0">
           <div class="page-padding-x pt-8">
-            <n-skeleton class="h-8 w-48 mb-6" />
+            <div class="h-8 w-48 mb-6 skeleton-shimmer rounded-xl" />
             <div
               class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
             >
               <div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
-                <n-skeleton class="h-20 w-20 rounded-full" />
-                <n-skeleton text class="w-16" />
-                <n-skeleton text class="w-24" />
+                <div class="h-20 w-20 skeleton-shimmer rounded-full" />
+                <div class="h-4 w-16 skeleton-shimmer rounded-lg" />
+                <div class="h-3 w-24 skeleton-shimmer rounded-lg" />
               </div>
             </div>
           </div>
diff --git a/src/renderer/views/user/follows.vue b/src/renderer/views/user/follows.vue
index 679fff1..e076df6 100644
--- a/src/renderer/views/user/follows.vue
+++ b/src/renderer/views/user/follows.vue
@@ -5,14 +5,14 @@
         <!-- Loading State -->
         <div v-if="followListLoading && followList.length === 0">
           <div class="page-padding-x pt-8">
-            <n-skeleton class="h-8 w-48 mb-6" />
+            <div class="h-8 w-48 mb-6 skeleton-shimmer rounded-xl" />
             <div
               class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
             >
               <div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
-                <n-skeleton class="h-20 w-20 rounded-full" />
-                <n-skeleton text class="w-16" />
-                <n-skeleton text class="w-24" />
+                <div class="h-20 w-20 skeleton-shimmer rounded-full" />
+                <div class="h-4 w-16 skeleton-shimmer rounded-lg" />
+                <div class="h-3 w-24 skeleton-shimmer rounded-lg" />
               </div>
             </div>
           </div>
diff --git a/src/renderer/views/user/index.vue b/src/renderer/views/user/index.vue
index 32a5e7b..1c793c8 100644
--- a/src/renderer/views/user/index.vue
+++ b/src/renderer/views/user/index.vue
@@ -1,30 +1,32 @@
 <template>
   <div class="user-page">
     <template v-if="infoLoading">
-      <div class="left bg-gray-200 p-4 dark:bg-gray-800">
+      <div
+        class="left-skeleton flex-1 max-w-[600px] rounded-2xl overflow-hidden p-4 bg-light-200 dark:bg-dark-100"
+      >
         <div class="flex flex-col gap-6">
           <div class="flex justify-between">
-            <n-skeleton text class="h-8 w-32" />
-            <n-skeleton text class="h-6 w-20" />
+            <div class="h-8 w-32 skeleton-shimmer rounded-lg" />
+            <div class="h-6 w-20 skeleton-shimmer rounded-lg" />
           </div>
           <div class="flex items-center gap-4">
-            <n-skeleton class="h-[50px] w-[50px] rounded-full" />
+            <div class="h-[50px] w-[50px] skeleton-shimmer rounded-full" />
             <div class="flex w-2/5 justify-around">
               <div v-for="i in 3" :key="i" class="flex flex-col items-center gap-1">
-                <n-skeleton text class="h-5 w-8" />
-                <n-skeleton text class="h-4 w-12" />
+                <div class="h-5 w-8 skeleton-shimmer rounded-lg" />
+                <div class="h-4 w-12 skeleton-shimmer rounded-lg" />
               </div>
             </div>
           </div>
-          <n-skeleton text class="h-4 w-3/4" />
+          <div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
           <div class="mt-4 rounded-xl bg-light p-4 dark:bg-black">
-            <n-skeleton class="mb-4 h-8 w-full rounded-xl" />
+            <div class="mb-4 h-8 w-full skeleton-shimmer rounded-xl" />
             <div class="space-y-4">
               <div v-for="i in 5" :key="i" class="flex gap-3">
-                <n-skeleton class="h-[50px] w-[50px] rounded-xl" />
+                <div class="h-[50px] w-[50px] skeleton-shimmer rounded-xl flex-shrink-0" />
                 <div class="flex flex-1 flex-col justify-center gap-2">
-                  <n-skeleton text class="h-4 w-1/2" />
-                  <n-skeleton text class="h-3 w-1/3" />
+                  <div class="h-4 w-1/2 skeleton-shimmer rounded-lg" />
+                  <div class="h-3 w-1/3 skeleton-shimmer rounded-lg" />
                 </div>
               </div>
             </div>
@@ -32,7 +34,7 @@
         </div>
       </div>
       <div v-if="!isMobile" class="right">
-        <div class="title"><n-skeleton text class="h-8 w-32" /></div>
+        <div class="title"><div class="h-8 w-32 skeleton-shimmer rounded-lg" /></div>
         <div class="rounded-2xl bg-light p-4 dark:bg-black">
           <div class="space-y-2">
             <div
@@ -40,11 +42,11 @@
               :key="i"
               class="flex items-center gap-4 rounded-2xl bg-light-100 p-2 dark:bg-dark-100"
             >
-              <n-skeleton class="h-10 w-10 rounded-full" />
-              <n-skeleton class="h-10 w-10 rounded-xl" />
+              <div class="h-10 w-10 skeleton-shimmer rounded-full flex-shrink-0" />
+              <div class="h-10 w-10 skeleton-shimmer rounded-xl flex-shrink-0" />
               <div class="flex flex-1 flex-col gap-2">
-                <n-skeleton text class="h-4 w-1/3" />
-                <n-skeleton text class="h-3 w-1/4" />
+                <div class="h-4 w-1/3 skeleton-shimmer rounded-lg" />
+                <div class="h-3 w-1/4 skeleton-shimmer rounded-lg" />
               </div>
             </div>
           </div>