Flip-анимация перемещения диалогов

app/components/DialogsList/DialogsList.tsx

@@ -4,7 +4,7 @@ import animationData from './lottie.json';
 import { Box, Flex, Skeleton, Text } from "@mantine/core";
 import { useDialogsList } from "@/app/providers/DialogListProvider/useDialogsList";
 import { GroupDialog } from "../GroupDialog/GroupDialog";
-import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
 
 interface DialogsListProps {
 	mode: 'all' | 'requests';
@@ -13,6 +13,7 @@ interface DialogsListProps {
 
 export function DialogsList(props : DialogsListProps) {
 	const {dialogs, loadingDialogs} = useDialogsList();
+	const filteredDialogs = dialogs.filter(v => (v.is_request == (props.mode == 'requests')));
 
 	return (
 		<>
@@ -36,8 +37,15 @@ export function DialogsList(props : DialogsListProps) {
 					))}				
 				</>
 			)}
-			{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).map((dialog) => (
-				<React.Fragment key={dialog.dialog_id}>
+            <motion.div style={{display: 'flex', flexDirection: 'column'}}>
+                <AnimatePresence mode="popLayout">
+                    {loadingDialogs === 0 && filteredDialogs.map((dialog) => (
+                        <motion.div
+                            key={dialog.dialog_id}
+                            layout
+                            initial={false}
+                            transition={{ duration: 0.1, ease: 'easeInOut' }}
+                        >
                             {dialog.dialog_id.startsWith('#group:') ? (
                                 <GroupDialog
                                     onClickDialog={props.onSelectDialog}
@@ -49,8 +57,10 @@ export function DialogsList(props : DialogsListProps) {
                                     {...dialog}
                                 />
                             )}
-				</React.Fragment>
+                        </motion.div>
                     ))}
+                </AnimatePresence>
+            </motion.div>
 		</>
 	);
 }