💫 chore: Add flip animation to Autocomplete, Gallery, and Saved Generations

src/lib/components/models/autocomplete/Autocomplete.svelte

@@ -3,6 +3,7 @@
 	import type { ModelCard } from "$lib/type";
 	import Icon from "@iconify/svelte";
 	import Item from "./Item.svelte";
+	import { flip } from 'svelte/animate';
 
   export let defaultModels: ModelCard[] = [];
   export let onChange: (model: ModelCard | null) => void;
@@ -78,14 +79,16 @@
   > 
     {#if search?.length >= 3}
       {#if models?.length > 0}
-        {#each models as model}
-          <Item
-            model={model}
-            onClick={() => {
-              open = false;
-              onChange(model)
-            }}
-          />
+        {#each models as model (model.id)}
+        <span animate:flip={{ duration: 200 }}>
+            <Item
+              model={model}
+              onClick={() => {
+                open = false;
+                onChange(model)
+              }}
+            />
+        </span>
         {/each}
       {:else}
         <div class="flex items-center justify-center flex-col gap-2 p-3">

src/routes/gallery/+layout.svelte

@@ -12,6 +12,7 @@
 	import { userStore } from "$lib/stores/use-user";
 	import { onMount } from "svelte";
 	import type { CommunityCard } from "$lib/type";
+	import { flip } from "svelte/animate";
 
 	let data: {
 		cards: CommunityCard[],
@@ -85,8 +86,13 @@
 	</div>
 	<!-- mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-5 mt-8 lg:mt-10 -->
 	<div class="mx-auto flex flex-wrap gap-5 mt-8 lg:mt-10 justify-center md:justify-start">
-		{#each data.cards as card}
-			<Card card={card} form={form} displayDelete={$userStore?.is_admin} />
+		{#each data.cards as card (card.id)}
+			<span
+				class="h-[400px] max-w-[400px] md:h-[350px] md:max-w-[350px] w-full"
+				animate:flip={{ duration: 200 }}
+			>
+				<Card {card} {form} displayDelete={$userStore?.is_admin} />
+			</span>
 		{/each}
 		<InfiniteScroll
 			elementScroll="{elementScroll ?? undefined}"

src/routes/saved-generations/+page.svelte

@@ -2,6 +2,7 @@
 	import Card from "$lib/components/community/Card.svelte";
 	import GoTop from "$lib/components/GoTop.svelte";
 	import GalleryViewer from "$lib/components/community/viewer/Viewer.svelte";
+	import { flip } from "svelte/animate";
 
   export let data
 </script>
@@ -16,8 +17,10 @@
 		Saved generations ({data.total_items})
 	</h1>
 	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
-		{#each data.cards as card}
-			<Card card={card} displayReactions={false} displayDelete={true} displayPublish={true} />
+		{#each data.cards as card (card.id)}
+			<div animate:flip={{ duration: 200 }}>
+				<Card {card} displayReactions={false} displayDelete={true} displayPublish={true} />
+			</div>	
 		{/each}
 		<GoTop />
 	</div>