69 lines
2.5 KiB
JavaScript
69 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
|
|
const sidebarRows = Array.from({ length: 11 }, (_, index) => index);
|
|
const metricCards = Array.from({ length: 6 }, (_, index) => index);
|
|
|
|
export function PageLoadingFallback() {
|
|
return (
|
|
<div className="app-page-loading" aria-busy="true" aria-label="页面加载中">
|
|
<section className="app-page-loading__panel">
|
|
<div className="app-loading-line app-page-loading__title" />
|
|
<div className="app-loading-line app-page-loading__toolbar" />
|
|
<div className="app-page-loading__grid">
|
|
{metricCards.map((item) => (
|
|
<div className="app-page-loading__card" key={item}>
|
|
<div className="app-loading-line app-page-loading__card-title" />
|
|
<div className="app-loading-line app-page-loading__card-value" />
|
|
<div className="app-loading-line app-page-loading__card-meta" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function AuthPageLoadingFallback() {
|
|
return (
|
|
<div className="auth-page-loading" aria-busy="true" aria-label="登录页加载中">
|
|
<section className="auth-page-loading__card">
|
|
<div className="app-loading-line auth-page-loading__title" />
|
|
<div className="app-loading-line auth-page-loading__input" />
|
|
<div className="app-loading-line auth-page-loading__input" />
|
|
<div className="app-loading-line auth-page-loading__button" />
|
|
<div className="app-loading-line auth-page-loading__meta" />
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function AppShellSkeleton() {
|
|
return (
|
|
<div className="app-shell-loading" aria-busy="true" aria-label="页面加载中">
|
|
<aside className="app-shell-loading__sidebar">
|
|
<div className="app-shell-loading__brand">
|
|
<div className="app-loading-dot" />
|
|
<div className="app-loading-line app-shell-loading__brand-text" />
|
|
</div>
|
|
<div className="app-shell-loading__nav">
|
|
{sidebarRows.map((item) => (
|
|
<div className="app-shell-loading__nav-item" key={item}>
|
|
<div className="app-loading-dot is-small" />
|
|
<div className="app-loading-line" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="app-shell-loading__user">
|
|
<div className="app-loading-dot" />
|
|
<div className="app-loading-line" />
|
|
</div>
|
|
</aside>
|
|
<main className="app-shell-loading__content">
|
|
<PageLoadingFallback />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PageLoadingFallback;
|