Arik ChakmaandKamran Ahmed
1981568501
* wip * wip * wip * fix: button width * Add stepper component * Refactor project stepper * Refactor stepper * Refactor stepper * Update clicker * Refactor project stepper * Add projects tip popup * Add start project modal * Submission requirement modalg * Requirement verification functionality * Update project submission * Voting and active timeline * Finalize project solution stepper * Update empty project page * Add user avatars * Solutions listing page * Update tab design * Fix styles for loading and pagination * Redesign project page header * Make project page responsive * Make project pages responsive * Update the leaving roadmap page * Start project modal updates --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { isMobileScreen } from '../../lib/is-mobile.ts';
|
|
|
|
export function LoadingSolutions() {
|
|
const totalCount = isMobileScreen() ? 3 : 11;
|
|
|
|
const loadingRow = (
|
|
<li className="flex min-h-[78px] animate-pulse flex-wrap items-center justify-between overflow-hidden rounded-md bg-gray-200 sm:min-h-[44px] sm:animate-none sm:rounded-none sm:bg-transparent">
|
|
<span className="flex items-center">
|
|
<span className="block h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200"></span>
|
|
<span
|
|
className={`ml-2 block h-[26px] w-[350px] animate-pulse rounded-full bg-gray-200`}
|
|
></span>
|
|
</span>
|
|
<span className="flex items-center gap-2">
|
|
<span
|
|
className={
|
|
'animated-pulse h-[26px] w-[80px] rounded-full bg-gray-200'
|
|
}
|
|
></span>
|
|
<span
|
|
className={
|
|
'animated-pulse h-[26px] w-[113px] rounded-full bg-gray-200'
|
|
}
|
|
></span>
|
|
</span>
|
|
</li>
|
|
);
|
|
|
|
return (
|
|
<ul className="flex min-h-[500px] flex-col gap-2 divide-y sm:gap-0">
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
{loadingRow}
|
|
</ul>
|
|
);
|
|
}
|