Delay in response when using bubbleBuilder with GestureDetector in Chat widget

[noaonoszko]

General

What bug do you experience? 🐞

I experience a noticeable delay (~0.5 seconds) when tapping a GestureDetector within a custom bubble built with the bubbleBuilder parameter of the Chat widget. This delay affects the responsiveness of interactive elements within the chat bubbles, impacting the user experience.

How can it be reproduced? 🤔

1. Create a Chat widget with a custom bubbleBuilder that includes a GestureDetector.
2. Tap on the area covered by the GestureDetector.
3. Observe a delay before any action (like a print statement) is executed.

What behavior is expected? 💡

Taps on elements within a custom bubble built with bubbleBuilder should register and respond immediately, without any noticeable delay.

Extras

Screenshots or videos 📸

Not applicable.

Code snippets 📝

Here's a simplified example demonstrating the issue:

class ChatPage extends StatelessWidget {
  const ChatPage({super.key});

  @override
  Widget build(BuildContext context) {
    final chatBloc = BlocProvider.of<ChatBloc>(context);
    final user = chatBloc.user;

    return BlocBuilder<ChatBloc, chat_state.ChatState>(
      builder: (context, state) {
        if (!state.initialMessagesLoaded) {
          return const Center(child: CircularProgressIndicator());
        } else {
          return Chat(
            bubbleBuilder: bubbleBuilder,
            messages: state.messages,
            onSendPressed: (types.PartialText messages) {},
            showUserAvatars: true,
            showUserNames: true,
            user: user,
          );
        }
      },
    );
  }

  Widget bubbleBuilder(
    Widget child, {
    required types.Message message,
    required bool nextMessageInGroup,
  }) {
    return Bubble(
      child: GestureDetector(
        onTap: () {
          print("GestureDetector tapped");
        },
        child: const Text(
          "Tap here",
        ),
      ),
    );
  }
}

Environment info

flutter: 3.19.3
flutter-chat-ui: 1.6.12

flutter doctor -v output 👇

[✓] Flutter (Channel stable, 3.19.3, on macOS 14.3 23D56 darwin-arm64, locale en-SE)
    • Flutter version 3.19.3 on channel stable at /Users/noaonoszko/.local/src/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (7 days ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).

[✓] Connected device (3 available)
    • iPhone 15 (mobile) • 7C3BCE09-4CA7-45D3-BD1F-7382A84A650D • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
    • macOS (desktop)    • macos                                • darwin-arm64   • macOS 14.3 23D56 darwin-arm64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 122.0.6261.129

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

Platform

Device: iPhone 12 mini and iPhone 15 simulator

OS version: iOS 16.5.1 and iOS 17.2 respectively.

Additional context

Debugging Steps Taken

Here's a summary of my efforts to isolate and understand this issue:

• Confirmed rapid response to UI interactions elsewhere in the app, e.g., a mic button within customBottomWidget responds instantly.
• Tested the functionality without using flutter_bloc for state management to rule out any potential delays introduced by state updates.
• Replaced GestureDetector with InkWell to check if the issue was specific to the gesture detection widget.
• Simplified the custom bubble structure by using basic Flutter widgets like Column instead of the provided Bubble widget, observing the same delay.
• Executed flutter clean and flutter pub get.
• Minimized external dependencies to create a streamlined example demonstrating the issue.

[noaonoszko]

I experience the same delay with a GestureDetector in a customMessageBuilder.

[demchenkoalex]

Hey! Thanks for the very detailed bug report @noaonoszko! When I built v1 my flutter knowledge was very minimal and even now it is kind of mediocre (I am a swift/react native engineer). If you look at the code I did not apply any of the best practices in Flutter and performance is awful IMO. I am rewriting the whole thing from scratch trying to apply all the best practices and it should not be an issue there. So I will have to leave this until v2 is out, cause v1 code is a mess and I will not be able to work on it, it just disgusts me now haha

[noaonoszko]

Thanks for the reply! I understand, wishing you luck with v2 :) Will it be possible to try out v2 before it's officially released, or will it be a mess until then?

[demchenkoalex]

I mean it is kind of working right now if you check v2 branch, but need to sort out proper caching mechanism for media to continue with the UI