Skip to content

fix(ui): avoid spurious StreamTypingIndicator rebuilds on unchanged typing users #2826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VelikovPetar wants to merge 1 commit into
base: master
Choose a base branch
from
+178 −56
Open

fix(ui): avoid spurious StreamTypingIndicator rebuilds on unchanged typing users #2826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/stream_chat_flutter/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- Fixed shadowed messages not hidden in channel list items.
- Fixed `StreamMessageListView` firing `markThreadRead` on a reply-less parent, which produced a guaranteed 404 every time the thread view was opened before the first reply.
- Fixed dismissing the `StreamMessageListView` unread indicator being ignored while a channel is receiving a rapid burst of messages.
- Fixed `StreamTypingIndicator` rebuilding on every typing event by comparing the typing users by id, so it only rebuilds when the set of typing users changes.

## 10.1.0

Expand Down
13 changes: 13 additions & 0 deletions packages/stream_chat_flutter/lib/src/indicators/typing_indicator.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'package:collection/collection.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:stream_chat_flutter/src/misc/empty_widget.dart';
Expand Down Expand Up @@ -32,6 +33,17 @@ class StreamTypingIndicator extends StatelessWidget {
/// Id of the parent message in case of a thread
final String? parentId;

// Compares the typing users by id so the indicator only rebuilds when the
// set of typing users changes. The stream maps to a new lazy Iterable on
// every typing event (and on the stale-typing cleanup), so identity equality
// would rebuild even when the same users are still typing. Order-sensitive
// because only the first user is shown by name.
bool _typingUsersEquals(Iterable<User>? previous, Iterable<User>? current) {
final previousIds = previous?.map((it) => it.id).toList() ?? const <String>[];
final currentIds = current?.map((it) => it.id).toList() ?? const <String>[];
return const ListEquality<String>().equals(previousIds, currentIds);
}

@override
Widget build(BuildContext context) {
final channelState = channel?.state ?? StreamChannel.of(context).channel.state!;
Expand All @@ -43,6 +55,7 @@ class StreamTypingIndicator extends StatelessWidget {
stream: channelState.typingEventsStream.map(
(typingEvents) => typingEvents.entries.where((element) => element.value.parentId == parentId).map((e) => e.key),
),
comparator: _typingUsersEquals,
builder: (context, users) => AnimatedSwitcher(
layoutBuilder: (currentChild, previousChildren) => Stack(
children: <Widget>[
Expand Down
220 changes: 164 additions & 56 deletions packages/stream_chat_flutter/test/src/indicators/typing_indicator_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';
Expand All @@ -6,93 +8,199 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import '../mocks.dart';

void main() {
testWidgets(
'it should show channel typing',
(WidgetTester tester) async {
final client = MockClient();
final clientState = MockClientState();
final channel = MockChannel();
final channelState = MockChannelState();
final lastMessageAt = DateTime.parse('2020-06-22 12:00:00');

when(() => client.state).thenReturn(clientState);
when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id'));
when(() => channel.lastMessageAt).thenReturn(lastMessageAt);
when(() => channel.state).thenReturn(channelState);
when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer(
(i) => Stream.value({
'name': 'test',
}),
);
when(() => channel.extraData).thenReturn({
late MockClient client;
late MockClientState clientState;
late MockChannel channel;
late MockChannelState channelState;

setUp(() {
client = MockClient();
clientState = MockClientState();
channel = MockChannel();
channelState = MockChannelState();
final lastMessageAt = DateTime.parse('2020-06-22 12:00:00');

when(() => client.state).thenReturn(clientState);
when(() => clientState.currentUser).thenReturn(OwnUser(id: 'user-id'));
when(() => channel.lastMessageAt).thenReturn(lastMessageAt);
when(() => channel.state).thenReturn(channelState);
when(() => channel.client).thenReturn(client);
when(() => channel.isMuted).thenReturn(false);
when(() => channel.isMutedStream).thenAnswer((i) => Stream.value(false));
when(() => channel.extraDataStream).thenAnswer(
(i) => Stream.value({
'name': 'test',
});
when(() => channelState.membersStream).thenAnswer(
(i) => Stream.value([
Member(
userId: 'user-id',
user: User(id: 'user-id'),
),
]),
);
when(() => channelState.members).thenReturn([
}),
);
when(() => channel.extraData).thenReturn({
'name': 'test',
});
when(() => channelState.membersStream).thenAnswer(
(i) => Stream.value([
Member(
userId: 'user-id',
user: User(id: 'user-id'),
),
]);
when(() => channelState.messages).thenReturn([
]),
);
when(() => channelState.members).thenReturn([
Member(
userId: 'user-id',
user: User(id: 'user-id'),
),
]);
when(() => channelState.messages).thenReturn([
Message(
text: 'hello',
user: User(id: 'other-user'),
),
]);
when(() => channelState.messagesStream).thenAnswer(
(i) => Stream.value([
Message(
text: 'hello',
user: User(id: 'other-user'),
),
]);
when(() => channelState.messagesStream).thenAnswer(
(i) => Stream.value([
Message(
text: 'hello',
user: User(id: 'other-user'),
]),
);
});

Widget buildTarget({Key? key}) {
return MaterialApp(
home: StreamChat(
client: client,
child: StreamChannel(
channel: channel,
child: Scaffold(
body: StreamTypingIndicator(
key: key,
),
),
]),
);
),
),
);
}

testWidgets(
'it should show channel typing',
(WidgetTester tester) async {
when(() => channelState.typingEvents).thenAnswer(
(i) => {
User(id: 'other-user', extraData: const {'name': 'demo'}): Event(type: EventType.typingStart),
User(id: 'other-user', name: 'demo'): Event(type: EventType.typingStart),
},
);
when(() => channelState.typingEventsStream).thenAnswer(
(i) => Stream.value({
User(id: 'other-user', extraData: const {'name': 'demo'}): Event(type: EventType.typingStart),
User(id: 'other-user', name: 'demo'): Event(type: EventType.typingStart),
}),
);

const typingKey = Key('typing');

await tester.pumpWidget(buildTarget(key: typingKey));

// wait for the initial state to be rendered.
await tester.pump(Duration.zero);

expect(find.byKey(typingKey), findsOneWidget);
expect(find.byType(Flexible), findsOneWidget);
},
);

// Advances the stream event and the 300ms AnimatedSwitcher transition
// without settling (the typing dots animation repeats forever).
Future<void> emit(
WidgetTester tester,
StreamController<Map<User, Event>> controller,
Map<User, Event> typingEvents,
) async {
controller.add(typingEvents);
await tester.pump();
await tester.pump(const Duration(seconds: 1));
}

testWidgets(
'it updates as the set of typing users changes',
(WidgetTester tester) async {
final typingController = StreamController<Map<User, Event>>.broadcast();
addTearDown(typingController.close);

when(() => channelState.typingEvents).thenReturn(const {});
when(() => channelState.typingEventsStream).thenAnswer(
(_) => typingController.stream,
);

Event event() => Event(type: EventType.typingStart);

await tester.pumpWidget(
MaterialApp(
home: StreamChat(
client: client,
child: StreamChannel(
home: Scaffold(
body: StreamTypingIndicator(channel: channel),
),
),
);
await tester.pump();

// No one is typing -> no typing row is shown.
expect(find.byType(Flexible), findsNothing);

// A single user is typing -> their name is shown.
await emit(tester, typingController, {
User(id: 'user-a', name: 'Alice'): event(),
});
expect(find.text('Alice is typing'), findsOneWidget);

// A second user joins -> the summarized text is shown.
await emit(tester, typingController, {
User(id: 'user-a', name: 'Alice'): event(),
User(id: 'user-b', name: 'Bob'): event(),
});
expect(find.text('Alice and 1 more are typing'), findsOneWidget);

// Everyone stops typing -> the typing row is removed again.
await emit(tester, typingController, const {});
expect(find.byType(Flexible), findsNothing);
},
);

testWidgets(
'it only shows typing users matching its parentId',
(WidgetTester tester) async {
final typingController = StreamController<Map<User, Event>>.broadcast();
addTearDown(typingController.close);

when(() => channelState.typingEvents).thenReturn(const {});
when(() => channelState.typingEventsStream).thenAnswer(
(_) => typingController.stream,
);

await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: StreamTypingIndicator(
channel: channel,
child: const Scaffold(
body: StreamTypingIndicator(
key: typingKey,
),
),
parentId: 'thread-1',
),
),
),
);
await tester.pump();

// wait for the initial state to be rendered.
await tester.pump(Duration.zero);
// Typing in the main channel (no parentId) is ignored by a thread
// indicator.
await emit(tester, typingController, {
User(id: 'user-a', name: 'Alice'): Event(type: EventType.typingStart),
});
expect(find.byType(Flexible), findsNothing);
Comment on lines +172 to +194

@coderabbitai coderabbitai Bot Jul 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Cover filtering of the initial typing state.

Initializing typingEvents to {} only tests filtering after stream emission. Seed it with a main-channel typing event before mounting the thread indicator and assert that user is never rendered; this exposes the unfiltered initialData at typing_indicator.dart Line 54.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/stream_chat_flutter/test/src/indicators/typing_indicator_test.dart`
around lines 172 - 194, Extend the test around StreamTypingIndicator to seed
channelState.typingEvents with a main-channel typing event before mounting the
widget, then assert that User(id: 'user-a') is not rendered immediately after
the initial pump. Keep the existing stream-emission assertion to verify
filtering continues to work for subsequent events.


expect(find.byKey(typingKey), findsOneWidget);
expect(find.byType(Flexible), findsOneWidget);
// Typing within the thread is shown.
await emit(tester, typingController, {
User(id: 'user-b', name: 'Bob'): Event(
type: EventType.typingStart,
parentId: 'thread-1',
),
});
expect(find.text('Bob is typing'), findsOneWidget);
},
);
}
Loading