Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

add card skeleton when not even in large display visualization

Browse source
This commit is contained in:
Marco Pedone 2025-12-22 10:37:57 +01:00
parent 391d75702a
commit a43bfa2329
2 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/infoalloggi/src/components/servizio/annuncio_card.tsx
View file

@ -127,3 +127,19 @@ export const BasicAnnuncioCard = ({
</Card>
);
};
export const AnnuncioCardSkeleton = () => {
return (
<Card className="hidden w-full gap-2 rounded-md border-border py-3 opacity-30 lg:flex">
<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2">
<CardTitle className="h-8 w-64 rounded-md bg-muted" />
</CardHeader>
<CardContent className="h-max px-3">
<div className="flex w-full flex-col gap-4">
<div className="h-[194px] w-full rounded-md bg-muted" />
<div className="h-8 w-48 rounded-md bg-muted" />
</div>
</CardContent>
</Card>
);
};

6
apps/infoalloggi/src/components/servizio/main.tsx
View file

@ -4,7 +4,10 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";
import toast from "react-hot-toast";
import { AnnuncioCard } from "~/components/servizio/annuncio_card";
import {
AnnuncioCard,
AnnuncioCardSkeleton,
} from "~/components/servizio/annuncio_card";
import { SaldoButton } from "~/components/servizio/interactions";
import { ServizioActions } from "~/components/servizio/servizio_actions";
import { Button } from "~/components/ui/button";
@ -294,6 +297,7 @@ export const ServizioContent = () => {
</ServizioAnnuncioProvider>
);
})}
{servizio.annunci.length % 2 === 1 && <AnnuncioCardSkeleton />}
</div>
<div className="flex items-center justify-center">