Akiba So
3db3b12480
Atomic foundation for the consensus-approved UX modernization (makes the platform URL-addressable, refresh-safe, and mobile-usable for hospital demos). - Migrate hand-rolled useState page switching → react-router v6 (routes.tsx, thin App.tsx auth gate, NavLink SideNav, lazy+Suspense per route) - Add responsive AppShell: persistent rail (lg:) ⇄ off-canvas drawer + hamburger (<lg); kills hardcoded ml-[200px]; usable at 375px - Add ui primitive kit (Skeleton/LoadingState/EmptyState/Card/Panel/Segmented) - Sweep all raw "加载中..." text loaders → skeleton primitives (G4) - Centralize test ids (utils/testids.ts); rewrite e2e for URL nav (17/17 pass: deep-link, refresh-preserves-page, back, 375px drawer/no-scroll) - Harden DemographicAnalysis against API shape mismatch (defensive normalize) - gitignore playwright-report/ and test-results/ Gates: tsc --noEmit 0 · pnpm build ok · e2e 17/17 · grep 加载中 zero outside ui/ Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
31 lines
697 B
TypeScript
31 lines
697 B
TypeScript
import { Skeleton } from './Skeleton';
|
|
|
|
export function LoadingState({
|
|
label,
|
|
testid,
|
|
lines = 3,
|
|
}: {
|
|
label?: string;
|
|
testid?: string;
|
|
lines?: number;
|
|
}): JSX.Element {
|
|
return (
|
|
<div
|
|
data-testid={testid ?? 'loading-state'}
|
|
className="flex flex-col items-center justify-center gap-3 p-6 w-full"
|
|
>
|
|
<div className="flex flex-col gap-2 w-full max-w-sm">
|
|
{Array.from({ length: lines }).map((_, i) => (
|
|
<Skeleton
|
|
key={i}
|
|
className={`h-4 ${i === lines - 1 ? 'w-2/3' : 'w-full'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
{label && (
|
|
<p className="text-xs text-text-muted">{label}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|