add card skeleton when not even in large display visualization

apps/infoalloggi/src/components/servizio/annuncio_card.tsx

@@ -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>
+	);
+};

apps/infoalloggi/src/components/servizio/main.tsx

@@ -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">