💫 Optimize the chat room animation

lib/hooks/use_room_scroll.dart

@@ -4,11 +4,9 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/pods/chat/chat_room.dart';
 import 'package:island/database/message.dart';
 import 'package:island/pods/chat/messages_notifier.dart';
-import 'package:super_sliver_list/super_sliver_list.dart';
 
 class RoomScrollManager {
   final ScrollController scrollController;
-  final ListController listController;
   final ValueNotifier<double> bottomGradientOpacity;
   bool isScrollingToMessage;
   final void Function({
@@ -19,7 +17,6 @@ class RoomScrollManager {
 
   RoomScrollManager({
     required this.scrollController,
-    required this.listController,
     required this.bottomGradientOpacity,
     required this.scrollToMessage,
     this.isScrollingToMessage = false,
@@ -33,7 +30,6 @@ RoomScrollManager useRoomScrollManager(
   AsyncValue<List<LocalChatMessage>> messagesAsync,
 ) {
   final scrollController = useScrollController();
-  final listController = useMemoized(() => ListController(), []);
   final bottomGradientOpacity = useState(ValueNotifier<double>(0.0));
 
   var isLoading = false;
@@ -47,14 +43,23 @@ RoomScrollManager useRoomScrollManager(
     WidgetsBinding.instance.addPostFrameCallback((_) {
       WidgetsBinding.instance.addPostFrameCallback((_) {
         try {
-          listController.animateToItem(
+          messagesAsync.when(
-            index: index,
+            data: (messageList) {
-            scrollController: scrollController,
+              if (!scrollController.hasClients) return;
-            alignment: 0.5,
+
-            duration: (estimatedDistance) => Duration(
+              final messageIndex = index;
-              milliseconds: (estimatedDistance * 0.5).clamp(200, 800).toInt(),
+              final totalMessages = messageList.length;
-            ),
+
-            curve: (estimatedDistance) => Curves.easeOutCubic,
+              if (messageIndex < 0 || messageIndex >= totalMessages) return;
+
+              scrollController.animateTo(
+                messageIndex * 80.0,
+                duration: const Duration(milliseconds: 300),
+                curve: Curves.easeOutCubic,
+              );
+            },
+            loading: () {},
+            error: (_, _) {},
           );
 
           Future.delayed(const Duration(milliseconds: 800), () {
@@ -109,7 +114,7 @@ RoomScrollManager useRoomScrollManager(
           bottomGradientOpacity.value.value = (pixels / 500.0).clamp(0.0, 1.0);
         },
         loading: () {},
-        error: (_, _) {},
+        error: (_, _) => {},
       );
     }
 
@@ -119,7 +124,6 @@ RoomScrollManager useRoomScrollManager(
 
   return RoomScrollManager(
     scrollController: scrollController,
-    listController: listController,
     bottomGradientOpacity: bottomGradientOpacity.value,
     scrollToMessage: scrollToMessageWrapper,
     isScrollingToMessage: isScrollingToMessage,

lib/screens/chat/room.dart

@@ -143,7 +143,6 @@ class ChatRoomScreen extends HookConsumerWidget {
     final inputKey = useMemoized(() => GlobalKey(), []);
     final inputHeight = useState<double>(80.0);
     final inputManager = useRoomInputManager(ref, id);
-
     final roomOpenTime = useMemoized(() => DateTime.now());
 
     final previousInputHeightRef = useRef<double?>(null);
@@ -372,7 +371,6 @@ class ChatRoomScreen extends HookConsumerWidget {
                               roomAsync: chatRoom,
                               chatIdentity: chatIdentity,
                               scrollController: scrollManager.scrollController,
-                              listController: scrollManager.listController,
                               isSelectionMode: isSelectionMode.value,
                               selectedMessages: selectedMessages.value,
                               toggleSelectionMode: toggleSelectionMode,
@@ -381,10 +379,10 @@ class ChatRoomScreen extends HookConsumerWidget {
                               onJump: onJump,
                               attachmentProgress:
                                   inputManager.attachmentProgress,
-                              disableAnimation: settings.disableAnimation,
-                              roomOpenTime: roomOpenTime,
                               inputHeight: inputHeight.value,
                               previousInputHeight: previousInputHeightRef.value,
+                              roomOpenTime: roomOpenTime,
+                              disableAnimation: settings.disableAnimation,
                             ),
                       loading: () => const Center(
                         key: ValueKey('loading-messages'),

lib/screens/chat/widgets/message_item_wrapper.dart

@@ -5,23 +5,6 @@ import 'package:island/database/message.dart';
 import 'package:island/models/chat.dart';
 import 'package:island/widgets/chat/message_item.dart';
 
-// Provider to track animated messages to prevent replay
-final animatedMessagesProvider =
-    NotifierProvider<AnimatedMessagesNotifier, Set<String>>(
-      AnimatedMessagesNotifier.new,
-    );
-
-class AnimatedMessagesNotifier extends Notifier<Set<String>> {
-  @override
-  Set<String> build() {
-    return {};
-  }
-
-  void addMessage(String messageId) {
-    state = {...state, messageId};
-  }
-}
-
 class MessageItemWrapper extends ConsumerWidget {
   final LocalChatMessage message;
   final int index;
@@ -34,8 +17,8 @@ class MessageItemWrapper extends ConsumerWidget {
   final Function(String, LocalChatMessage) onMessageAction;
   final Function(String) onJump;
   final Map<String, Map<int, double?>> attachmentProgress;
-  final bool disableAnimation;
   final DateTime roomOpenTime;
+  final bool disableAnimation;
 
   const MessageItemWrapper({
     super.key,
@@ -50,53 +33,18 @@ class MessageItemWrapper extends ConsumerWidget {
     required this.onMessageAction,
     required this.onJump,
     required this.attachmentProgress,
-    required this.disableAnimation,
     required this.roomOpenTime,
+    required this.disableAnimation,
   });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    // Animation logic
+    return chatIdentity.when(
-    final animatedMessages = ref.watch(animatedMessagesProvider);
-    final isNewMessage = message.createdAt.isAfter(roomOpenTime);
-    final hasAnimated = animatedMessages.contains(message.id);
-
-    // Only animate if:
-    // 1. Animation is enabled
-    // 2. Message is new (created after room open)
-    // 3. Has not animated yet
-    final shouldAnimate = !disableAnimation && isNewMessage && !hasAnimated;
-
-    final child = chatIdentity.when(
       skipError: true,
       data: (identity) => _buildContent(context, identity),
       loading: () => _buildLoading(),
       error: (_, _) => const SizedBox.shrink(),
     );
-
-    if (!shouldAnimate) {
-      return child;
-    }
-
-    return TweenAnimationBuilder<double>(
-      key: ValueKey('anim-${message.id}'), // Ensure unique key for animation
-      tween: Tween<double>(begin: 0.0, end: 1.0),
-      duration: Duration(milliseconds: 400 + (index % 5) * 50),
-      curve: Curves.easeOutCubic,
-      builder: (context, value, child) {
-        return Transform.translate(
-          offset: Offset(0, 20 * (1 - value)),
-          child: Opacity(opacity: value, child: child),
-        );
-      },
-      onEnd: () {
-        // Mark as animated
-        WidgetsBinding.instance.addPostFrameCallback((_) {
-          ref.read(animatedMessagesProvider.notifier).addMessage(message.id);
-        });
-      },
-      child: child,
-    );
   }
 
   Widget _buildContent(BuildContext context, SnChatMember? identity) {
@@ -116,12 +64,9 @@ class MessageItemWrapper extends ConsumerWidget {
         }
       },
       child: Container(
-        color:
+        color: isSelected
-            isSelected
+            ? Theme.of(context).colorScheme.primaryContainer.withOpacity(0.3)
-                ? Theme.of(
+            : null,
-                  context,
-                ).colorScheme.primaryContainer.withOpacity(0.3)
-                : null,
         child: Stack(
           children: [
             MessageItem(
@@ -130,10 +75,9 @@ class MessageItemWrapper extends ConsumerWidget {
               key: ValueKey('item-${message.id}'),
               message: message,
               isCurrentUser: isCurrentUser,
-              onAction:
+              onAction: isSelectionMode
-                  isSelectionMode
+                  ? null
-                      ? null
+                  : (action) => onMessageAction(action, message),
-                      : (action) => onMessageAction(action, message),
               onJump: onJump,
               progress: attachmentProgress[message.id],
               showAvatar: isLastInGroup,

lib/widgets/chat/room_message_list.dart

@@ -1,17 +1,15 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/database/message.dart';
 import 'package:island/models/chat.dart';
-import 'package:island/pods/config.dart';
 import 'package:island/screens/chat/widgets/message_item_wrapper.dart';
-import 'package:super_sliver_list/super_sliver_list.dart';
 
 class RoomMessageList extends HookConsumerWidget {
   final List<LocalChatMessage> messages;
   final AsyncValue<SnChatRoom?> roomAsync;
   final AsyncValue<SnChatMember?> chatIdentity;
   final ScrollController scrollController;
-  final ListController listController;
   final bool isSelectionMode;
   final Set<String> selectedMessages;
   final VoidCallback toggleSelectionMode;
@@ -19,10 +17,10 @@ class RoomMessageList extends HookConsumerWidget {
   final void Function(String action, LocalChatMessage message) onMessageAction;
   final void Function(String messageId) onJump;
   final Map<String, Map<int, double?>> attachmentProgress;
-  final bool disableAnimation;
-  final DateTime roomOpenTime;
   final double inputHeight;
   final double? previousInputHeight;
+  final DateTime roomOpenTime;
+  final bool disableAnimation;
 
   const RoomMessageList({
     super.key,
@@ -30,7 +28,6 @@ class RoomMessageList extends HookConsumerWidget {
     required this.roomAsync,
     required this.chatIdentity,
     required this.scrollController,
-    required this.listController,
     required this.isSelectionMode,
     required this.selectedMessages,
     required this.toggleSelectionMode,
@@ -38,45 +35,84 @@ class RoomMessageList extends HookConsumerWidget {
     required this.onMessageAction,
     required this.onJump,
     required this.attachmentProgress,
-    required this.disableAnimation,
-    required this.roomOpenTime,
     required this.inputHeight,
+    required this.roomOpenTime,
+    required this.disableAnimation,
     this.previousInputHeight,
   });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final settings = ref.watch(appSettingsProvider);
+    final animatedListKey = useMemoized(
+      () => GlobalKey<SliverAnimatedListState>(),
+      [],
+    );
     const messageKeyPrefix = 'message-';
 
     final bottomPadding =
         inputHeight + MediaQuery.of(context).padding.bottom + 8;
 
-    final listWidget =
+    final listKeys = useRef<List<String>>([]);
-        previousInputHeight != null && previousInputHeight != inputHeight
+    final messageMap = useRef<Map<String, LocalChatMessage>>({});
-        ? TweenAnimationBuilder<double>(
+
-            tween: Tween<double>(begin: previousInputHeight, end: inputHeight),
+    useEffect(() {
-            duration: const Duration(milliseconds: 200),
+      final currentKeys = messages
-            curve: Curves.easeOut,
+          .map((m) => '$messageKeyPrefix${m.nonce ?? m.id}')
-            builder: (context, height, child) => SuperListView.builder(
+          .toList();
-              listController: listController,
+      final previousKeys = listKeys.value;
-              controller: scrollController,
+
-              reverse: true,
+      final addedKeys = currentKeys
-              padding: EdgeInsets.only(
+          .where((k) => !previousKeys.contains(k))
-                top: 8,
+          .toList();
-                bottom: height + MediaQuery.of(context).padding.bottom + 8,
+      final removedKeys = previousKeys
-              ),
+          .where((k) => !currentKeys.contains(k))
-              itemCount: messages.length,
+          .toList();
-              findChildIndexCallback: (key) {
+
-                if (key is! ValueKey<String>) return null;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
-                final messageId = key.value.substring(messageKeyPrefix.length);
+        final state = animatedListKey.currentState;
-                final index = messages.indexWhere(
+        if (state != null) {
-                  (m) => (m.nonce ?? m.id) == messageId,
+          for (final key in removedKeys) {
-                );
+            final index = messageMap.value.keys.toList().indexOf(key);
-                return index >= 0 ? index : null;
+            if (index != -1) {
-              },
+              state.removeItem(
-              extentEstimation: (_, _) => 40,
+                index,
-              itemBuilder: (context, index) {
+                (context, animation) => _buildRemovedItem(context, animation),
+              );
+            }
+          }
+
+          for (final key in addedKeys) {
+            final index = currentKeys.indexOf(key);
+            state.insertItem(
+              index,
+              duration: Duration(milliseconds: 300 + (index % 3) * 50),
+            );
+          }
+        }
+      });
+
+      listKeys.value = currentKeys;
+      messageMap.value = {
+        for (var m in messages) '$messageKeyPrefix${m.nonce ?? m.id}': m,
+      };
+      return null;
+    }, [messages]);
+
+    final listWidget = CustomScrollView(
+      controller: scrollController,
+      reverse: true,
+      slivers: [
+        if (previousInputHeight != null && previousInputHeight != inputHeight)
+          SliverPadding(
+            padding: EdgeInsets.only(top: 8, bottom: bottomPadding),
+            sliver: SliverAnimatedList(
+              key: animatedListKey,
+              initialItemCount: messages.length,
+              itemBuilder: (context, index, animation) {
+                if (index >= messages.length) {
+                  return const SizedBox.shrink();
+                }
+
                 final message = messages[index];
                 final nextMessage = index < messages.length - 1
                     ? messages[index + 1]
@@ -94,77 +130,124 @@ class RoomMessageList extends HookConsumerWidget {
                   '$messageKeyPrefix${message.nonce ?? message.id}',
                 );
 
-                return MessageItemWrapper(
+                return _buildAnimatedItem(
-                  key: key,
+                  context,
-                  message: message,
+                  animation,
-                  index: index,
+                  MessageItemWrapper(
-                  isLastInGroup: isLastInGroup,
+                    key: key,
-                  isSelectionMode: isSelectionMode,
+                    message: message,
-                  selectedMessages: selectedMessages,
+                    index: index,
-                  chatIdentity: chatIdentity,
+                    isLastInGroup: isLastInGroup,
-                  toggleSelectionMode: toggleSelectionMode,
+                    isSelectionMode: isSelectionMode,
-                  toggleMessageSelection: toggleMessageSelection,
+                    selectedMessages: selectedMessages,
-                  onMessageAction: onMessageAction,
+                    chatIdentity: chatIdentity,
-                  onJump: onJump,
+                    toggleSelectionMode: toggleSelectionMode,
-                  attachmentProgress: attachmentProgress,
+                    toggleMessageSelection: toggleMessageSelection,
-                  disableAnimation: settings.disableAnimation,
+                    onMessageAction: onMessageAction,
-                  roomOpenTime: roomOpenTime,
+                    onJump: onJump,
+                    attachmentProgress: attachmentProgress,
+                    roomOpenTime: roomOpenTime,
+                    disableAnimation: true,
+                  ),
                 );
               },
             ),
           )
-        : SuperListView.builder(
+        else
-            listController: listController,
+          SliverPadding(
-            controller: scrollController,
-            reverse: true,
             padding: EdgeInsets.only(top: 8, bottom: bottomPadding),
-            itemCount: messages.length,
+            sliver: SliverAnimatedList(
-            findChildIndexCallback: (key) {
+              key: animatedListKey,
-              if (key is! ValueKey<String>) return null;
+              initialItemCount: messages.length,
-              final messageId = key.value.substring(messageKeyPrefix.length);
+              itemBuilder: (context, index, animation) {
-              final index = messages.indexWhere(
+                if (index >= messages.length) {
-                (m) => (m.nonce ?? m.id) == messageId,
+                  return const SizedBox.shrink();
-              );
+                }
-              return index >= 0 ? index : null;
-            },
-            extentEstimation: (_, _) => 40,
-            itemBuilder: (context, index) {
-              final message = messages[index];
-              final nextMessage = index < messages.length - 1
-                  ? messages[index + 1]
-                  : null;
-              final isLastInGroup =
-                  nextMessage == null ||
-                  nextMessage.senderId != message.senderId ||
-                  nextMessage.createdAt
-                          .difference(message.createdAt)
-                          .inMinutes
-                          .abs() >
-                      3;
 
-              final key = Key(
+                final message = messages[index];
-                '$messageKeyPrefix${message.nonce ?? message.id}',
+                final nextMessage = index < messages.length - 1
-              );
+                    ? messages[index + 1]
+                    : null;
+                final isLastInGroup =
+                    nextMessage == null ||
+                    nextMessage.senderId != message.senderId ||
+                    nextMessage.createdAt
+                            .difference(message.createdAt)
+                            .inMinutes
+                            .abs() >
+                        3;
 
-              return MessageItemWrapper(
+                final key = Key(
-                key: key,
+                  '$messageKeyPrefix${message.nonce ?? message.id}',
-                message: message,
+                );
-                index: index,
+
-                isLastInGroup: isLastInGroup,
+                return _buildAnimatedItem(
-                isSelectionMode: isSelectionMode,
+                  context,
-                selectedMessages: selectedMessages,
+                  animation,
-                chatIdentity: chatIdentity,
+                  MessageItemWrapper(
-                toggleSelectionMode: toggleSelectionMode,
+                    key: key,
-                toggleMessageSelection: toggleMessageSelection,
+                    message: message,
-                onMessageAction: onMessageAction,
+                    index: index,
-                onJump: onJump,
+                    isLastInGroup: isLastInGroup,
-                attachmentProgress: attachmentProgress,
+                    isSelectionMode: isSelectionMode,
-                disableAnimation: settings.disableAnimation,
+                    selectedMessages: selectedMessages,
-                roomOpenTime: roomOpenTime,
+                    chatIdentity: chatIdentity,
-              );
+                    toggleSelectionMode: toggleSelectionMode,
-            },
+                    toggleMessageSelection: toggleMessageSelection,
-          );
+                    onMessageAction: onMessageAction,
+                    onJump: onJump,
+                    attachmentProgress: attachmentProgress,
+                    roomOpenTime: roomOpenTime,
+                    disableAnimation: true,
+                  ),
+                );
+              },
+            ),
+          ),
+      ],
+    );
 
     return listWidget;
   }
+
+  Widget _buildAnimatedItem(
+    BuildContext context,
+    Animation<double> animation,
+    Widget child,
+  ) {
+    final curvedAnimation = CurvedAnimation(
+      parent: animation,
+      curve: Curves.easeOutQuart,
+    );
+
+    final scaleAnimation = Tween<double>(
+      begin: 0.92,
+      end: 1.0,
+    ).animate(curvedAnimation);
+    final slideAnimation = Tween<Offset>(
+      begin: const Offset(0, 0.12),
+      end: Offset.zero,
+    ).animate(curvedAnimation);
+    final fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
+      CurvedAnimation(
+        parent: animation,
+        curve: const Interval(0.1, 1.0, curve: Curves.easeOut),
+      ),
+    );
+
+    return FadeTransition(
+      opacity: fadeAnimation,
+      child: ScaleTransition(
+        scale: scaleAnimation,
+        child: SlideTransition(position: slideAnimation, child: child),
+      ),
+    );
+  }
+
+  Widget _buildRemovedItem(BuildContext context, Animation<double> animation) {
+    return SizeTransition(
+      sizeFactor: animation,
+      child: FadeTransition(opacity: animation, child: SizedBox.shrink()),
+    );
+  }
 }