match list

src/features/tournaments/components/tournament-list.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "@tanstack/react-router";
 import Avatar from "@/components/avatar";
 import { TournamentInfo } from "../types";
 import { useCallback } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { TrophyIcon, CalendarIcon, MapPinIcon } from "@phosphor-icons/react";
 
 interface TournamentListProps {
@@ -51,15 +51,17 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
 
   return (
     <Stack gap="xs">
-      {tournaments.map((tournament, index) => {
+      <AnimatePresence>
+        {tournaments.map((tournament, index) => {
         const startDate = tournament.start_time ? new Date(tournament.start_time) : null;
 
         return (
           <motion.div
-            key={tournament.id}
-            initial={{ opacity: 0, y: 20 }}
+            key={`tournament-${tournament.id}-${index}`}
+            initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3, delay: index * 0.05 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.2, delay: index * 0.01 }}
             whileHover={{ y: -2 }}
             whileTap={{ scale: 0.98 }}
           >
@@ -135,7 +137,8 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
             </Box>
           </motion.div>
         );
-      })}
+        })}
+      </AnimatePresence>
     </Stack>
   );
 }