💫 Optimize the chat message animation and performance

lib/hooks/use_room_scroll.dart

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

lib/screens/chat/room.dart

@@ -365,6 +365,7 @@ class ChatRoomScreen extends HookConsumerWidget {
                               roomAsync: chatRoom,
                               chatIdentity: chatIdentity,
                               scrollController: scrollManager.scrollController,
+                              listController: scrollManager.listController,
                               isSelectionMode: isSelectionMode.value,
                               selectedMessages: selectedMessages.value,
                               toggleSelectionMode: toggleSelectionMode,

lib/screens/chat/widgets/message_item_wrapper.dart

@@ -1,11 +1,29 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.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/widgets/chat/message_item.dart';
 
-class MessageItemWrapper extends ConsumerWidget {
+// 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 HookConsumerWidget {
   final LocalChatMessage message;
   final int index;
   final bool isLastInGroup;
@@ -17,8 +35,8 @@ class MessageItemWrapper extends ConsumerWidget {
   final Function(String, LocalChatMessage) onMessageAction;
   final Function(String) onJump;
   final Map<String, Map<int, double?>> attachmentProgress;
-  final DateTime roomOpenTime;
   final bool disableAnimation;
+  final DateTime roomOpenTime;
 
   const MessageItemWrapper({
     super.key,
@@ -33,20 +51,10 @@ class MessageItemWrapper extends ConsumerWidget {
     required this.onMessageAction,
     required this.onJump,
     required this.attachmentProgress,
-    required this.roomOpenTime,
     required this.disableAnimation,
+    required this.roomOpenTime,
   });
 
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return chatIdentity.when(
-      skipError: true,
-      data: (identity) => _buildContent(context, identity),
-      loading: () => _buildLoading(),
-      error: (_, _) => const SizedBox.shrink(),
-    );
-  }
-
   Widget _buildContent(BuildContext context, SnChatMember? identity) {
     final isSelected = selectedMessages.contains(message.id);
     final isCurrentUser = identity?.id == message.senderId;
@@ -122,4 +130,88 @@ class MessageItemWrapper extends ConsumerWidget {
       onJump: (_) {},
     );
   }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // Animation logic
+    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(),
+    );
+
+    final controller = useAnimationController(
+      duration: Duration(milliseconds: 400 + (index % 5) * 50),
+    );
+
+    final hasStarted = useState(false);
+
+    useEffect(() {
+      if (shouldAnimate && !hasStarted.value) {
+        hasStarted.value = true;
+        controller.forward().then((_) {
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            ref.read(animatedMessagesProvider.notifier).addMessage(message.id);
+          });
+        });
+      }
+      return null;
+    }, [shouldAnimate]);
+
+    if (!shouldAnimate) {
+      return child;
+    }
+
+    final curvedAnimation = useMemoized(
+      () => CurvedAnimation(parent: controller, curve: Curves.easeOutQuart),
+      [controller],
+    );
+
+    final sizeAnimation = useMemoized(
+      () => Tween<double>(begin: 0.0, end: 1.0).animate(curvedAnimation),
+      [curvedAnimation],
+    );
+
+    final slideAnimation = useMemoized(
+      () => Tween<Offset>(
+        begin: const Offset(0, 0.12),
+        end: Offset.zero,
+      ).animate(curvedAnimation),
+      [curvedAnimation],
+    );
+
+    final fadeAnimation = useMemoized(
+      () => Tween<double>(begin: 0.0, end: 1.0).animate(
+        CurvedAnimation(
+          parent: controller,
+          curve: const Interval(0.1, 1.0, curve: Curves.easeOut),
+        ),
+      ),
+      [controller],
+    );
+
+    return AnimatedBuilder(
+      animation: controller,
+      builder: (context, child) => FadeTransition(
+        opacity: fadeAnimation,
+        child: SizeTransition(
+          axis: Axis.vertical,
+          sizeFactor: sizeAnimation,
+          child: SlideTransition(position: slideAnimation, child: child),
+        ),
+      ),
+      child: child,
+    );
+  }
 }

lib/widgets/chat/room_message_list.dart

@@ -1,15 +1,17 @@
 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;
@@ -17,10 +19,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,
@@ -28,6 +30,7 @@ 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,
@@ -35,84 +38,45 @@ class RoomMessageList extends HookConsumerWidget {
     required this.onMessageAction,
     required this.onJump,
     required this.attachmentProgress,
-    required this.inputHeight,
-    required this.roomOpenTime,
     required this.disableAnimation,
+    required this.roomOpenTime,
+    required this.inputHeight,
     this.previousInputHeight,
   });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final animatedListKey = useMemoized(
+    final settings = ref.watch(appSettingsProvider);
-      () => GlobalKey<SliverAnimatedListState>(),
-      [],
-    );
     const messageKeyPrefix = 'message-';
 
     final bottomPadding =
         inputHeight + MediaQuery.of(context).padding.bottom + 8;
 
-    final listKeys = useRef<List<String>>([]);
+    final listWidget =
-    final messageMap = useRef<Map<String, LocalChatMessage>>({});
+        previousInputHeight != null && previousInputHeight != inputHeight
-
+        ? TweenAnimationBuilder<double>(
-    useEffect(() {
+            tween: Tween<double>(begin: previousInputHeight, end: inputHeight),
-      final currentKeys = messages
+            duration: const Duration(milliseconds: 200),
-          .map((m) => '$messageKeyPrefix${m.nonce ?? m.id}')
+            curve: Curves.easeOut,
-          .toList();
+            builder: (context, height, child) => SuperListView.builder(
-      final previousKeys = listKeys.value;
+              listController: listController,
-
+              controller: scrollController,
-      final addedKeys = currentKeys
+              reverse: true,
-          .where((k) => !previousKeys.contains(k))
+              padding: EdgeInsets.only(
-          .toList();
+                top: 8,
-      final removedKeys = previousKeys
+                bottom: height + MediaQuery.of(context).padding.bottom + 8,
-          .where((k) => !currentKeys.contains(k))
+              ),
-          .toList();
+              itemCount: messages.length,
-
+              findChildIndexCallback: (key) {
-      WidgetsBinding.instance.addPostFrameCallback((_) {
+                if (key is! ValueKey<String>) return null;
-        final state = animatedListKey.currentState;
+                final messageId = key.value.substring(messageKeyPrefix.length);
-        if (state != null) {
+                final index = messages.indexWhere(
-          for (final key in removedKeys) {
+                  (m) => (m.nonce ?? m.id) == messageId,
-            final index = messageMap.value.keys.toList().indexOf(key);
+                );
-            if (index != -1) {
+                return index >= 0 ? index : null;
-              state.removeItem(
+              },
-                index,
+              extentEstimation: (_, _) => 40,
-                (context, animation) => _buildRemovedItem(context, animation),
+              itemBuilder: (context, index) {
-              );
-            }
-          }
-
-          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]
@@ -130,124 +94,77 @@ class RoomMessageList extends HookConsumerWidget {
                   '$messageKeyPrefix${message.nonce ?? message.id}',
                 );
 
-                return _buildAnimatedItem(
+                return MessageItemWrapper(
-                  context,
+                  key: key,
-                  animation,
+                  message: message,
-                  MessageItemWrapper(
+                  index: index,
-                    key: key,
+                  isLastInGroup: isLastInGroup,
-                    message: message,
+                  isSelectionMode: isSelectionMode,
-                    index: index,
+                  selectedMessages: selectedMessages,
-                    isLastInGroup: isLastInGroup,
+                  chatIdentity: chatIdentity,
-                    isSelectionMode: isSelectionMode,
+                  toggleSelectionMode: toggleSelectionMode,
-                    selectedMessages: selectedMessages,
+                  toggleMessageSelection: toggleMessageSelection,
-                    chatIdentity: chatIdentity,
+                  onMessageAction: onMessageAction,
-                    toggleSelectionMode: toggleSelectionMode,
+                  onJump: onJump,
-                    toggleMessageSelection: toggleMessageSelection,
+                  attachmentProgress: attachmentProgress,
-                    onMessageAction: onMessageAction,
+                  disableAnimation: settings.disableAnimation,
-                    onJump: onJump,
+                  roomOpenTime: roomOpenTime,
-                    attachmentProgress: attachmentProgress,
-                    roomOpenTime: roomOpenTime,
-                    disableAnimation: true,
-                  ),
                 );
               },
             ),
           )
-        else
+        : SuperListView.builder(
-          SliverPadding(
+            listController: listController,
+            controller: scrollController,
+            reverse: true,
             padding: EdgeInsets.only(top: 8, bottom: bottomPadding),
-            sliver: SliverAnimatedList(
+            itemCount: messages.length,
-              key: animatedListKey,
+            findChildIndexCallback: (key) {
-              initialItemCount: messages.length,
+              if (key is! ValueKey<String>) return null;
-              itemBuilder: (context, index, animation) {
+              final messageId = key.value.substring(messageKeyPrefix.length);
-                if (index >= messages.length) {
+              final index = messages.indexWhere(
-                  return const SizedBox.shrink();
+                (m) => (m.nonce ?? m.id) == messageId,
-                }
+              );
+              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 message = messages[index];
+              final key = Key(
-                final nextMessage = index < messages.length - 1
+                '$messageKeyPrefix${message.nonce ?? message.id}',
-                    ? messages[index + 1]
+              );
-                    : null;
-                final isLastInGroup =
-                    nextMessage == null ||
-                    nextMessage.senderId != message.senderId ||
-                    nextMessage.createdAt
-                            .difference(message.createdAt)
-                            .inMinutes
-                            .abs() >
-                        3;
 
-                final key = Key(
+              return MessageItemWrapper(
-                  '$messageKeyPrefix${message.nonce ?? message.id}',
+                key: key,
-                );
+                message: message,
-
+                index: index,
-                return _buildAnimatedItem(
+                isLastInGroup: isLastInGroup,
-                  context,
+                isSelectionMode: isSelectionMode,
-                  animation,
+                selectedMessages: selectedMessages,
-                  MessageItemWrapper(
+                chatIdentity: chatIdentity,
-                    key: key,
+                toggleSelectionMode: toggleSelectionMode,
-                    message: message,
+                toggleMessageSelection: toggleMessageSelection,
-                    index: index,
+                onMessageAction: onMessageAction,
-                    isLastInGroup: isLastInGroup,
+                onJump: onJump,
-                    isSelectionMode: isSelectionMode,
+                attachmentProgress: attachmentProgress,
-                    selectedMessages: selectedMessages,
+                disableAnimation: settings.disableAnimation,
-                    chatIdentity: chatIdentity,
+                roomOpenTime: roomOpenTime,
-                    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()),
-    );
-  }
 }