302 lines
10 KiB
TypeScript
302 lines
10 KiB
TypeScript
import type { CSSProperties } from 'react'
|
|
import type { LucideIcon } from 'lucide-react'
|
|
import {
|
|
AlignJustify,
|
|
Archive,
|
|
CheckCircle2,
|
|
ChevronDown,
|
|
Code2,
|
|
FileText,
|
|
GitBranch,
|
|
Inbox,
|
|
Plus,
|
|
Search,
|
|
Settings,
|
|
SlidersHorizontal,
|
|
Sparkles,
|
|
Star,
|
|
Trash2,
|
|
} from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const SIDEBAR_GROUPS = [
|
|
{ rows: ['62%', '48%', '58%', '52%'], count: '24px' },
|
|
{ rows: ['72%'], count: '30px' },
|
|
{ rows: ['34%', '42%', '38%', '56%', '50%', '44%', '39%', '46%'], count: '26px' },
|
|
{ rows: ['38%', '52%', '32%'] },
|
|
]
|
|
|
|
const NOTE_ROWS = [
|
|
{ selected: false, title: '68%', snippet: '84%', chips: ['56px'] },
|
|
{ selected: true, title: '62%', snippet: '78%', chips: ['64px', '54px', '72px'] },
|
|
{ selected: false, title: '48%', snippet: '44%', chips: [] },
|
|
{ selected: false, title: '82%', snippet: '74%', chips: ['68px'] },
|
|
{ selected: false, title: '70%', snippet: '88%', chips: ['76px', '92px'] },
|
|
{ selected: false, title: '58%', snippet: '66%', chips: ['64px'] },
|
|
{ selected: false, title: '76%', snippet: '72%', chips: ['72px'] },
|
|
]
|
|
|
|
const EDITOR_ACTIONS = [Star, CheckCircle2, GitBranch, Code2, AlignJustify, Sparkles, Archive, Trash2, SlidersHorizontal]
|
|
const STATUS_LEFT = ['70px', '104px', '88px', '116px', '82px']
|
|
const STATUS_RIGHT = ['44px', '78px', '18px', '18px']
|
|
|
|
type AppLoadingSkeletonProps = {
|
|
noteListWidth?: number
|
|
showNoteList?: boolean
|
|
showSidebar?: boolean
|
|
sidebarWidth?: number
|
|
}
|
|
|
|
function SkeletonBar({ className, style }: { className?: string; style?: CSSProperties }) {
|
|
return (
|
|
<div
|
|
className={cn('animate-pulse rounded bg-muted', className)}
|
|
style={style}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function SkeletonIcon({ icon: Icon, active = false }: { icon: LucideIcon; active?: boolean }) {
|
|
return (
|
|
<Icon
|
|
size={16}
|
|
strokeWidth={1.9}
|
|
className={cn(active ? 'text-primary' : 'text-muted-foreground', 'shrink-0 opacity-70')}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function SidebarRow({ icon, width, active = false, countWidth }: {
|
|
icon: LucideIcon
|
|
width: string
|
|
active?: boolean
|
|
countWidth?: string
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn('flex items-center gap-2 rounded px-4 py-1.5', active && 'bg-primary/10')}
|
|
style={active ? { boxShadow: 'inset 3px 0 0 var(--primary)' } : undefined}
|
|
>
|
|
<SkeletonIcon icon={icon} active={active} />
|
|
<SkeletonBar className="h-3" style={{ width }} />
|
|
{countWidth && <SkeletonBar className="h-5 rounded-full" style={{ width: countWidth }} />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SidebarSkeletonGlyph() {
|
|
return <SkeletonBar className="h-4 w-4 shrink-0 rounded-[4px]" />
|
|
}
|
|
|
|
function SidebarStubRow({ width, countWidth }: {
|
|
width: string
|
|
countWidth?: string
|
|
}) {
|
|
return (
|
|
<div className="flex items-center gap-2 rounded px-4 py-1.5">
|
|
<SidebarSkeletonGlyph />
|
|
<SkeletonBar className="h-3" style={{ width }} />
|
|
{countWidth && <SkeletonBar className="h-5 rounded-full" style={{ width: countWidth }} />}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SidebarGroupSkeleton({ rows, count }: { rows: string[]; count?: string }) {
|
|
return (
|
|
<div className="border-b border-border px-1.5 pb-2">
|
|
<div className="flex items-center gap-1 px-4 py-2">
|
|
<ChevronDown size={12} className="text-muted-foreground opacity-60" />
|
|
<SkeletonBar className="h-2.5" style={{ width: '54px' }} />
|
|
{count && <SkeletonBar className="ml-auto h-4 rounded-full" style={{ width: count }} />}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
{rows.map((width, index) => (
|
|
<SidebarStubRow
|
|
key={`${width}-${index}`}
|
|
width={width}
|
|
countWidth={index > 3 ? '30px' : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function SidebarSkeleton() {
|
|
return (
|
|
<aside className="flex h-full flex-col overflow-hidden border-r border-[var(--sidebar-border)] bg-sidebar text-sidebar-foreground">
|
|
<div className="flex h-[52px] shrink-0 items-center border-b border-border px-3">
|
|
<div className="flex gap-2">
|
|
<span className="h-3 w-3 rounded-full bg-[#ff5f57]" />
|
|
<span className="h-3 w-3 rounded-full bg-[#ffbd2e]" />
|
|
<span className="h-3 w-3 rounded-full bg-[#28c840]" />
|
|
</div>
|
|
</div>
|
|
<nav className="flex-1 overflow-hidden py-1">
|
|
<div className="border-b border-border px-1.5 pb-1">
|
|
<SidebarRow icon={Inbox} width="48%" active countWidth="30px" />
|
|
<SidebarRow icon={FileText} width="54%" countWidth="38px" />
|
|
<SidebarRow icon={Archive} width="42%" countWidth="32px" />
|
|
</div>
|
|
{SIDEBAR_GROUPS.map((group, index) => (
|
|
<SidebarGroupSkeleton key={index} rows={group.rows} count={group.count} />
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
function NoteRowSkeleton({ selected, title, snippet, chips }: {
|
|
selected: boolean
|
|
title: string
|
|
snippet: string
|
|
chips: string[]
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn('relative border-b border-border px-5 py-4', selected && 'bg-primary/5')}
|
|
style={selected ? { boxShadow: 'inset 3px 0 0 var(--accent-green)' } : undefined}
|
|
>
|
|
<SkeletonBar className="absolute right-4 top-4 h-3.5 w-3.5 rounded-sm" />
|
|
<SkeletonBar className="mb-3 h-3.5" style={{ width: title }} />
|
|
<div className="space-y-1.5">
|
|
<SkeletonBar className="h-2.5" style={{ width: snippet }} />
|
|
<SkeletonBar className="h-2.5" style={{ width: '58%' }} />
|
|
</div>
|
|
{chips.length > 0 && (
|
|
<div className="mt-3 flex flex-wrap gap-1.5">
|
|
{chips.map((width) => (
|
|
<SkeletonBar key={width} className="h-5 rounded" style={{ width }} />
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="mt-3 grid grid-cols-[1fr_auto] gap-3">
|
|
<SkeletonBar className="h-2.5" style={{ width: '38px' }} />
|
|
<SkeletonBar className="h-2.5" style={{ width: '72px' }} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function NoteListSkeleton() {
|
|
return (
|
|
<section className="flex h-full flex-col overflow-hidden border-r border-border bg-card text-foreground">
|
|
<header className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-4">
|
|
<SkeletonBar className="h-4" style={{ width: '78px' }} />
|
|
<div className="flex items-center gap-3 text-muted-foreground">
|
|
<SkeletonBar className="h-2.5" style={{ width: '58px' }} />
|
|
<Search size={16} />
|
|
<SlidersHorizontal size={16} />
|
|
<Plus size={16} />
|
|
</div>
|
|
</header>
|
|
<div className="flex-1 overflow-hidden">
|
|
{NOTE_ROWS.map((row, index) => (
|
|
<NoteRowSkeleton key={index} {...row} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function EditorSkeleton() {
|
|
return (
|
|
<main className="flex h-full min-w-0 flex-1 flex-col overflow-hidden bg-background text-foreground">
|
|
<header className="flex h-[52px] shrink-0 items-center justify-between border-b border-border px-5">
|
|
<div className="flex items-center gap-2">
|
|
<SkeletonBar className="h-3" style={{ width: '44px' }} />
|
|
<SkeletonBar className="h-3" style={{ width: '150px' }} />
|
|
</div>
|
|
<div className="flex items-center gap-5 text-muted-foreground">
|
|
{EDITOR_ACTIONS.map((Icon, index) => (
|
|
<Icon key={index} size={16} strokeWidth={1.8} className="opacity-65" />
|
|
))}
|
|
</div>
|
|
</header>
|
|
<article className="mx-auto flex w-full max-w-[760px] flex-1 flex-col px-10 py-16">
|
|
<SkeletonBar className="mb-7 h-9" style={{ width: '58%' }} />
|
|
<SkeletonBar className="mb-6 h-px w-full rounded-none" />
|
|
<div className="space-y-4">
|
|
<SkeletonBar className="h-4" style={{ width: '52%' }} />
|
|
<SkeletonBar className="h-4" style={{ width: '92%' }} />
|
|
<SkeletonBar className="h-4" style={{ width: '82%' }} />
|
|
<SkeletonBar className="h-4" style={{ width: '88%' }} />
|
|
<SkeletonBar className="h-4" style={{ width: '74%' }} />
|
|
</div>
|
|
<SkeletonBar className="my-10 h-px w-full rounded-none" />
|
|
<div className="space-y-4">
|
|
<SkeletonBar className="h-4" style={{ width: '22%' }} />
|
|
{[0, 1, 2].map((index) => (
|
|
<div key={index} className="flex items-center gap-4 pl-4">
|
|
<SkeletonBar className="h-2.5 w-2.5 rounded-full bg-primary/70" />
|
|
<SkeletonBar className="h-4" style={{ width: index === 1 ? '54%' : '44%' }} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</article>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
function StatusSkeleton() {
|
|
return (
|
|
<footer
|
|
className="flex shrink-0 items-center justify-between border-t border-border bg-sidebar px-2 text-muted-foreground"
|
|
style={{ height: 30 }}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
{STATUS_LEFT.map((width, index) => (
|
|
<SkeletonBar key={`${width}-${index}`} className="h-3" style={{ width }} />
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{STATUS_RIGHT.map((width, index) => (
|
|
<SkeletonBar key={`${width}-${index}`} className="h-3" style={{ width }} />
|
|
))}
|
|
<Settings size={14} className="opacity-60" />
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|
|
|
|
export function AppLoadingSkeleton({
|
|
noteListWidth = 350,
|
|
showNoteList = true,
|
|
showSidebar = true,
|
|
sidebarWidth = 250,
|
|
}: AppLoadingSkeletonProps) {
|
|
return (
|
|
<div
|
|
className="app-shell"
|
|
data-testid="vault-loading-skeleton"
|
|
role="status"
|
|
aria-busy="true"
|
|
aria-live="polite"
|
|
>
|
|
<span className="sr-only">Loading vault</span>
|
|
<div className="app" aria-hidden="true">
|
|
{showSidebar && (
|
|
<>
|
|
<div className="app__sidebar" style={{ width: sidebarWidth }}>
|
|
<SidebarSkeleton />
|
|
</div>
|
|
<div className="w-px shrink-0 bg-border" />
|
|
</>
|
|
)}
|
|
{showNoteList && (
|
|
<>
|
|
<div className="app__note-list" style={{ width: noteListWidth }}>
|
|
<NoteListSkeleton />
|
|
</div>
|
|
<div className="w-px shrink-0 bg-border" />
|
|
</>
|
|
)}
|
|
<div className="app__editor">
|
|
<EditorSkeleton />
|
|
</div>
|
|
</div>
|
|
<StatusSkeleton />
|
|
</div>
|
|
)
|
|
}
|