MattrixwvReactComponents/src/util/LoadingUtils.tsx

import CenterGrowingBars from "$/component/loading/bar/CenterGrowingBars";
import CircleBars from "$/component/loading/bar/CircleBars";
import FadingBars from "$/component/loading/bar/FadingBars";
import FadingGrowingBars from "$/component/loading/bar/FadingGrowingBars";
import GrowingBars from "$/component/loading/bar/GrowingBars";
import PulsingBlocks from "$/component/loading/block/PulsingBlocks";
import SlidingBlocks2 from "$/component/loading/block/SlidingBlocks2";
import SlidingBlocks3 from "$/component/loading/block/SlidingBlocks3";
import WaveBlocks from "$/component/loading/block/WaveBlocks";
import BouncingDots from "$/component/loading/dot/BouncingDots";
import CircleCenterDots from "$/component/loading/dot/CircleCenterDots";
import CircleFadingDots from "$/component/loading/dot/CircleFadingDots";
import CirclePulsingDots from "$/component/loading/dot/CirclePulsingDots";
import CircleRotatingDots from "$/component/loading/dot/CircleRotatingDots";
import CircleShrinkingDots from "$/component/loading/dot/CircleShrinkingDots";
import CircleSpinningDot from "$/component/loading/dot/CircleSpinningDot";
import CyclingDots from "$/component/loading/dot/CyclingDots";
import FadingDots from "$/component/loading/dot/FadingDots";
import PulsingDots from "$/component/loading/dot/PulsingDots";
import RotatingDots from "$/component/loading/dot/RotatingDots";
import SwellingDots from "$/component/loading/dot/SwellingDots";
import DoubleDrop from "$/component/loading/drop/DoubleDrop";
import DoubleWaveDrop from "$/component/loading/drop/DoubleWaveDrop";
import Drop from "$/component/loading/drop/Drop";
import QuickDrop from "$/component/loading/drop/QuickDrop";
import QuickWaveDrop from "$/component/loading/drop/QuickWaveDrop";
import TripleDrop from "$/component/loading/drop/TripleDrop";
import TripleWaveDrop from "$/component/loading/drop/TripleWaveDrop";
import WaveDrop from "$/component/loading/drop/WaveDrop";
import HalfSpinner from "$/component/loading/spinner/HalfSpinner";
import QuarterSpinner from "$/component/loading/spinner/QuarterSpinner";
import RubberSpinner from "$/component/loading/spinner/RubberSpinner";
import ThreeQuarterSpinner from "$/component/loading/spinner/ThreeQuarterSpinner";
import BouncingDot from "$/component/loading/various/BouncingDot";
import PulsingLine from "$/component/loading/various/PulsingLine";
import SpinningBinary from "$/component/loading/various/SpinningBinary";
import SpinningClock from "$/component/loading/various/SpinningClock";
import SpinningEclipse from "$/component/loading/various/SpinningEclipse";
import SpinningEclipseHalf from "$/component/loading/various/SpinningEclipseHalf";
import SpinningGalaxy from "$/component/loading/various/SpinningGalaxy";
import SpinningTadpole from "$/component/loading/various/SpinningTadpole";
import Wifi from "$/component/loading/various/Wifi";
import type { JSX } from "react";


// eslint-disable-next-line react-refresh/only-export-components
function LoadingGroup({
	label,
	elements
}:{
	label: React.ReactNode;
	elements: JSX.Element[];
}){
	return (
		<div
			className="flex flex-col items-center justify-center"
		>
			<h1
				className="text-2xl"
			>
				{label}
			</h1>
			<div
				className="flex flex-row items-center justify-center gap-x-8"
			>
				{
					elements.map((spinner, index) => (
						<div
							key={index}
							className="w-32 h-32"
						>
							{spinner}
						</div>
					))
				}
			</div>
		</div>
	);
}


export function generateSpinnersContent(){
	return (
		<div
			className="flex flex-col items-center justify-center gap-y-16"
		>
			<LoadingGroup
				label="Quarter Spinner"
				elements={[
					<QuarterSpinner
						key={1}
						className="fill-blue-600"
					/>,
					<QuarterSpinner
						key={2}
						trackClassName="fill-neutral-700 dark:fill-zinc-700"
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Half Spinner"
				elements={[
					<HalfSpinner
						key={1}
						className="fill-blue-600"
					/>,
					<HalfSpinner
						key={2}
						trackClassName="fill-neutral-700 dark:fill-zinc-700"
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Three-Quarter Spinner"
				elements={[
					<ThreeQuarterSpinner
						key={1}
						className="fill-blue-600"
					/>,
					<ThreeQuarterSpinner
						key={2}
						trackClassName="fill-neutral-700 dark:fill-zinc-700"
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Rubber Spinner"
				elements={[
					<RubberSpinner
						key={1}
						stroke="#155dfc"
					/>,
					<RubberSpinner
						key={2}
						trackClassName="fill-neutral-700 dark:fill-zinc-700"
						stroke="#155dfc"
					/>
				]}
			/>
		</div>
	);
}

export function generateDotsContent(){
	return (
		<div
			className="flex flex-col items-center justify-center"
		>
			<LoadingGroup
				label="Bouncing"
				elements={[
					<BouncingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Fading"
				elements={[
					<FadingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Cycling"
				elements={[
					<CyclingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Rotating"
				elements={[
					<RotatingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Swelling"
				elements={[
					<SwellingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Pulsing"
				elements={[
					<PulsingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Circle Fading"
				elements={[
					<CircleFadingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Circle Shrinking"
				elements={[
					<CircleShrinkingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Circle Center"
				elements={[
					<CircleCenterDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Circle Rotating"
				elements={[
					<CircleRotatingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Circle Pulsing"
				elements={[
					<CirclePulsingDots
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Circle Spinning"
				elements={[
					<CircleSpinningDot
						key={1}
						trackClassName="fill-neutral-700 dark:fill-zinc-700"
						className="fill-blue-600"
					/>
				]}
			/>
		</div>
	);
}

export function generateBarsContent(){
	return (
		<div
			className="flex flex-col items-center justify-center"
		>
			<LoadingGroup
				label="Fading Bars"
				elements={[
					<FadingBars
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Growing Bars"
				elements={[
					<GrowingBars
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Fading Growing Bars"
				elements={[
					<FadingGrowingBars
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Center Growing Bars"
				elements={[
					<CenterGrowingBars
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Circle Bars"
				elements={[
					<CircleBars
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
		</div>
	);
}

export function generateBlocksContent(){
	return (
		<div
			className="flex flex-col items-center justify-center"
		>
			<LoadingGroup
				label="Pulsing Blocks"
				elements={[
					<PulsingBlocks
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Sliding Blocks 2"
				elements={[
					<SlidingBlocks2
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Sliding Blocks 3"
				elements={[
					<SlidingBlocks3
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Wave Blocks"
				elements={[
					<WaveBlocks
						key={1}
						className="fill-blue-600 stroke-0 stroke-black"
					/>
				]}
			/>
		</div>
	);
}

export function generatePulsesContent(){
	return (
		<div
			className="flex flex-col items-center justify-center"
		>
			<LoadingGroup
				label="Drop"
				elements={[
					<Drop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Double Drop"
				elements={[
					<DoubleDrop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Triple Drop"
				elements={[
					<TripleDrop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Quick Drop"
				elements={[
					<QuickDrop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Wave Drop"
				elements={[
					<WaveDrop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Double Wave Drop"
				elements={[
					<DoubleWaveDrop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Triple Wave Drop"
				elements={[
					<TripleWaveDrop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Quick Wave Drop"
				elements={[
					<QuickWaveDrop
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
		</div>
	);
}

export function generateVariousContent(){
	return (
		<div
			className="flex flex-col items-center justify-center"
		>
			<LoadingGroup
				label="Bouncing Dot"
				elements={[
					<BouncingDot
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Spinning Clock"
				elements={[
					<SpinningClock
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Spinning Eclipse"
				elements={[
					<SpinningEclipse
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Spinning Eclipse Half"
				elements={[
					<SpinningEclipseHalf
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Pulsing Line"
				elements={[
					<PulsingLine
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Spinning Binary"
				elements={[
					<SpinningBinary
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Spinning Tadpole"
				elements={[
					<SpinningTadpole
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
			<LoadingGroup
				label="Wifi"
				elements={[
					<Wifi
						key={1}
						className="fill-blue-600"
					/>,
					<Wifi
						key={2}
						className="fill-blue-600"
						fadeDuration={0.25}
					/>
				]}
			/>
			<LoadingGroup
				label="Spinning Galaxy"
				elements={[
					<SpinningGalaxy
						key={1}
						className="fill-blue-600"
					/>
				]}
			/>
		</div>
	);
}