feat: Redis/MySQL 加载骨架屏 loading 效果
- SchemaSidebar: MySQL 表列表加载改为 6 行骨架屏 animate-pulse - SchemaSidebar: Redis key 列表加载改为 6 行骨架屏 animate-pulse - RedisDetailPage: key 表格加载时显示 5 行骨架屏 + 加载中提示 - 替换原来的纯文字/spinner,视觉上更流畅
This commit is contained in:
1 parent
ca99f0ea7f
commit
6a8c4d95d5
2 files changed
+35
-6
No files matched your search
@@ -215,8 +215,14 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
{/* Table List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{loadingTables ? (
|
||||
<div className="flex items-center gap-2 p-3 text-xs text-[var(--dg-text-muted)]">
|
||||
<Loader2 className="w-3 h-3 animate-spin" /> 加载中...
|
||||
<div className="space-y-1 p-2">
|
||||
{Array.from({ length: 6 }, (_, i) => (
|
||||
<div key={i} className="flex items-center gap-2 px-2 py-1.5">
|
||||
<div className="w-3 h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse" />
|
||||
<div className="h-3.5 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
|
||||
<div className="h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-8" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : filteredTables.length === 0 ? (
|
||||
<div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">无表</div>
|
||||
@@ -311,10 +317,18 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
|
||||
|
||||
{/* Key List + Detail */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{redisKeys.length === 0 ? (
|
||||
<div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">
|
||||
{loadingRedis ? '扫描中...' : '无 Keys'}
|
||||
{loadingRedis ? (
|
||||
<div className="space-y-1 p-2">
|
||||
{Array.from({ length: 6 }, (_, i) => (
|
||||
<div key={i} className="flex items-center gap-2 px-2 py-1.5">
|
||||
<div className="w-3 h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse" />
|
||||
<div className="h-3.5 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
|
||||
<div className="h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-10" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : redisKeys.length === 0 ? (
|
||||
<div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">无 Keys</div>
|
||||
) : (
|
||||
<div className="divide-y divide-[var(--dg-border-light)]">
|
||||
{redisKeys.map(k => (
|
||||
|
||||
Reference in new issue
Block a user