From db72246e5ad027f801739a7b34400208b2c7230d Mon Sep 17 00:00:00 2001
From: RoyceDa <admin@rosetta-im.com>
Date: Fri, 20 Feb 2026 17:21:09 +0200
Subject: [PATCH] =?UTF-8?q?Flip-=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5=D1=89=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=B4=D0=B8=D0=B0=D0=BB=D0=BE=D0=B3=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/DialogsList/DialogsList.tsx | 42 +++++++++++++---------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/components/DialogsList/DialogsList.tsx b/app/components/DialogsList/DialogsList.tsx
index 275a1bc..97c8ab2 100644
--- a/app/components/DialogsList/DialogsList.tsx
+++ b/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,21 +37,30 @@ export function DialogsList(props : DialogsListProps) {
 					))}				
 				</>
 			)}
-			{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).map((dialog) => (
-				<React.Fragment key={dialog.dialog_id}>
-					{dialog.dialog_id.startsWith('#group:') ? (
-						<GroupDialog
-							onClickDialog={props.onSelectDialog}
-							{...dialog}
-						/>
-					) : (
-						<Dialog
-							onClickDialog={props.onSelectDialog}
-							{...dialog}
-						/>
-					)}
-				</React.Fragment>
-			))}
+            <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}
+                                    {...dialog}
+                                />
+                            ) : (
+                                <Dialog
+                                    onClickDialog={props.onSelectDialog}
+                                    {...dialog}
+                                />
+                            )}
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
+            </motion.div>
 		</>
 	);
 }
\ No newline at end of file