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
@@ -137,6 +137,21 @@ export default function RedisDetailPage() {
|
||||
|
||||
{/* 键列表 */}
|
||||
<div className="overflow-x-auto">
|
||||
{loading ? (
|
||||
<div className="space-y-2 p-4">
|
||||
{Array.from({ length: 5 }, function (_, i) {
|
||||
return <div key={i} className="flex items-center gap-4">
|
||||
<div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
|
||||
<div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-16" />
|
||||
<div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-12" />
|
||||
<div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-20" />
|
||||
</div>;
|
||||
})}
|
||||
<div className="text-center text-xs text-[var(--dg-text-muted)] pt-2">加载中...</div>
|
||||
</div>
|
||||
) : keys.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--dg-text-muted)]">点击刷新加载键列表</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead><tr className="text-left text-[var(--dg-text-muted)] border-b border-[var(--dg-border)]">
|
||||
<th className="px-4 py-2">键名</th><th className="px-4 py-2">类型</th><th className="px-4 py-2">TTL</th><th className="px-4 py-2">操作</th>
|
||||
@@ -157,7 +172,7 @@ export default function RedisDetailPage() {
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{keys.length === 0 && <div className="text-center py-8 text-[var(--dg-text-muted)]">点击刷新加载键列表</div>}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user