FileMaster

Edit File: loading-skeleton.js

import { Skeleton } from '@bsf/force-ui';
import { cn } from '@Functions/utils';

const AdminLoadingSkeleton = () => {
	// Different aspect ratio classes to mimic each section of the page.
	const aspectRatioArrayClassNames = [
		'aspect-video',
		'aspect-[7/2]',
		'aspect-[8/1]',
		'aspect-[8/2]',
		'aspect-[8/3]',
		'aspect-[8/4]',
	];
	const widthClassNames = [
		'w-1/5',
		'w-1/4',
		'w-1/6',
		'w-1/7',
		'w-1/8',
		'w-1/9',
		'w-5/12',
		'w-4/12',
		'w-3/6',
	];
	const minNumOfSections = 3;
	const maxNumOfSections = 7;
	const numOfSections = Math.floor(
		Math.random() * ( maxNumOfSections - minNumOfSections + 1 ) +
			minNumOfSections
	);

return (
		<div className="flex-1 flex flex-col gap-7 w-full">
			<div className="flex items-center justify-between w-full">
				<Skeleton variant="rectangular" className="w-1/4 h-8" />
				<Skeleton variant="rectangular" className="w-20 h-12" />
			</div>

<div className="w-full flex flex-col gap-10 p-4 bg-background-primary shadow-sm rounded-xl">
				{ Array.from( { length: numOfSections }, ( _, index ) => {
					const aspectRatioClassName =
						aspectRatioArrayClassNames[
							Math.floor(
								Math.random() *
									aspectRatioArrayClassNames.length
							)
						];

return (
						<div key={ index } className="w-full h-fit space-y-5">
							<div className="flex items-center justify-between gap-4">
								<Skeleton
									variant="rectangular"
									className={ cn(
										'w-24 h-8',
										widthClassNames[
											Math.floor(
												Math.random() *
													widthClassNames.length
											)
										]
									) }
								/>
							</div>
							<div
								key={ index }
								className={ aspectRatioClassName }
							>
								<Skeleton
									variant="rectangular"
									className="w-full h-full"
								/>
							</div>
						</div>
					);
				} ) }
			</div>
		</div>
	);
};

export default AdminLoadingSkeleton;

Back