Evandro Fonseca Junior
08dd046887
- Introduced DrawLine component for drawing animations. - Added LazyRevealImage component for lazy loading images with reveal animations. - Implemented TextDiffuseReveal for animated text reveals with staggered effects. - Created TopProgressBar for a dynamic loading indicator. - Added PointCloud mock for testing animations. - Developed useReducedMotion hook to handle user preferences for reduced motion. - Centralized animation configurations in config.ts for easier management. - Defined animation variants in variants.ts for consistent animation effects. - Established AnimationProvider to supply global animation settings. - Created tests for AnimationProvider and useReducedMotion hook. - Added SVG assets for branding and UI elements. - Documented frontend review plan and hero circuit board animation plan.
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
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">
|
|
{Array.from({ length: skeletons }).map((_, index) => (
|
|
<div key={`skeleton-${index}`} 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>
|
|
);
|
|
}
|