44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useId } from "react";
|
|
import { TopProgressBar } from "./animations/TopProgressBar";
|
|
|
|
interface SectionLoadingProps {
|
|
message: string;
|
|
dark?: boolean;
|
|
skeletons?: number;
|
|
}
|
|
|
|
export function SectionLoading({
|
|
message,
|
|
dark = false,
|
|
skeletons = 2,
|
|
}: Readonly<SectionLoadingProps>) {
|
|
const sectionClass = dark ? "ds-section ds-section-dark" : "ds-section";
|
|
const skeletonId = useId();
|
|
const skeletonKeys = Array.from(
|
|
{ length: skeletons },
|
|
(_, index) => `${skeletonId}-${index}`,
|
|
);
|
|
|
|
return (
|
|
<section className={sectionClass}>
|
|
<TopProgressBar />
|
|
<div className="ds-section-shell">
|
|
<div className="ds-loading">{message}</div>
|
|
<div className="ds-grid-2 mt-sp-6" aria-hidden="true">
|
|
{skeletonKeys.map((skeletonKey) => (
|
|
<div key={skeletonKey} className="ds-card ds-skeleton-card">
|
|
<div className="ds-skeleton ds-skeleton-kicker" />
|
|
<div className="ds-skeleton ds-skeleton-title" />
|
|
<div className="ds-skeleton ds-skeleton-line" />
|
|
<div className="ds-skeleton ds-skeleton-line" />
|
|
<div className="ds-skeleton ds-skeleton-line ds-skeleton-line-short" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|