Fixed issue with blinking navigation header when many messages sent

Author: martinmitrevski

CHANGELOG.md

@@ -3,7 +3,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 # Upcoming
 
+### ✅ Added
+- Configuring avatars visibility in groups
+
 ### 🔄 Changed
+- Message list creation requires `shouldShowTypingIndicator` as a parameter
+
+### 🐞 Fixed
+- Channel header sometimes blinks when many messages are sent
 
 # [4.20.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.20.0)
 _August 04, 2022_

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelView.swift

@@ -53,6 +53,7 @@ public struct ChatChannelView<Factory: ViewFactory>: View, KeyboardReadable {
                             currentDateString: viewModel.currentDateString,
                             listId: viewModel.listId,
                             isMessageThread: viewModel.isMessageThread,
+                            shouldShowTypingIndicator: viewModel.shouldShowTypingIndicator,
                             onMessageAppear: viewModel.handleMessageAppear(index:),
                             onScrollToBottom: viewModel.scrollToLastMessage,
                             onLongPress: { displayInfo in

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift

@@ -90,6 +90,8 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
             }
         }
     }
+
+    @Published public var shouldShowTypingIndicator = false
 
     public var channel: ChatChannel? {
         channelController.channel
@@ -219,6 +221,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         channelController: ChatChannelController
     ) {
         checkReadIndicators(for: channel)
+        checkTypingIndicator()
         checkHeaderType()
     }
 
@@ -355,7 +358,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
 
         if !reactionsShown && isMessageThread {
             type = .messageThread
-        } else if !typingUsers.isEmpty {
+        } else if !typingUsers.isEmpty && utils.messageListConfig.typingIndicatorPlacement == .navigationBar {
             type = .typingIndicator
         } else {
             type = .regular
@@ -477,6 +480,16 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
         }
     }
 
+    private func checkTypingIndicator() {
+        guard let channel = channel else { return }
+        let shouldShow = !channel.currentlyTypingUsersFiltered(currentUserId: chatClient.currentUserId).isEmpty
+            && utils.messageListConfig.typingIndicatorPlacement == .bottomOverlay
+            && channel.config.typingEventsEnabled
+        if shouldShow != shouldShowTypingIndicator {
+            shouldShowTypingIndicator = shouldShow
+        }
+    }
+    
     deinit {
         messageCachingUtils.clearCache()
         if messageController == nil {

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageListView.swift

@@ -21,6 +21,7 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
     var currentDateString: String?
     var listId: String
     var isMessageThread: Bool
+    var shouldShowTypingIndicator: Bool
 
     var onMessageAppear: (Int) -> Void
     var onScrollToBottom: () -> Void
@@ -45,12 +46,6 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
         utils.messageListDateUtils
     }
 
-    private var shouldShowTypingIndicator: Bool {
-        !channel.currentlyTypingUsersFiltered(currentUserId: chatClient.currentUserId).isEmpty
-            && messageListConfig.typingIndicatorPlacement == .bottomOverlay
-            && channel.config.typingEventsEnabled
-    }
-    
     private var lastInGroupHeaderSize: CGFloat {
         messageListConfig.messageDisplayOptions.lastInGroupHeaderSize
     }
@@ -68,6 +63,7 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
         currentDateString: String? = nil,
         listId: String,
         isMessageThread: Bool,
+        shouldShowTypingIndicator: Bool,
         onMessageAppear: @escaping (Int) -> Void,
         onScrollToBottom: @escaping () -> Void,
         onLongPress: @escaping (MessageDisplayInfo) -> Void
@@ -82,6 +78,7 @@ public struct MessageListView<Factory: ViewFactory>: View, KeyboardReadable {
         self.onMessageAppear = onMessageAppear
         self.onScrollToBottom = onScrollToBottom
         self.onLongPress = onLongPress
+        self.shouldShowTypingIndicator = shouldShowTypingIndicator
         _scrolledId = scrolledId
         _showScrollToLatestButton = showScrollToLatestButton
         _quotedMessage = quotedMessage

StreamChatSwiftUITests/Tests/ChatChannel/ChatChannelViewModel_Tests.swift

@@ -212,10 +212,15 @@ class ChatChannelViewModel_Tests: StreamChatTestCase {
 
         // Then
         XCTAssert(headerType == .regular)
+        XCTAssert(viewModel.shouldShowTypingIndicator == false)
     }
 
     func test_chatChannelVM_typingIndicatorMessageHeader() {
         // Given
+        let utils = Utils(
+            messageListConfig: MessageListConfig(typingIndicatorPlacement: .navigationBar)
+        )
+        streamChat = StreamChat(chatClient: chatClient, utils: utils)
         let channelController = makeChannelController()
         let typingUser: ChatChannelMember = ChatChannelMember.mock(id: .unique)
         let viewModel = ChatChannelViewModel(channelController: channelController)
@@ -233,6 +238,24 @@ class ChatChannelViewModel_Tests: StreamChatTestCase {
         XCTAssert(headerType == .typingIndicator)
     }
 
+    func test_chatChannelVM_typingIndicatorMessageList() {
+        // Given
+        let channelController = makeChannelController()
+        let typingUser: ChatChannelMember = ChatChannelMember.mock(id: .unique)
+        let viewModel = ChatChannelViewModel(channelController: channelController)
+        
+        // When
+        let channel: ChatChannel = .mockDMChannel(currentlyTypingUsers: Set(arrayLiteral: typingUser))
+        channelController.simulate(
+            channel: channel,
+            change: .update(channel),
+            typingUsers: Set(arrayLiteral: typingUser)
+        )
+        
+        // Then
+        XCTAssert(viewModel.shouldShowTypingIndicator == true)
+    }
+    
     func test_chatChannelVM_skipChanges() {
         // Given
         let channelController = makeChannelController()

StreamChatSwiftUITests/Tests/ChatChannel/MessageListViewAvatars_Tests.swift

@@ -86,6 +86,7 @@ class MessageListViewAvatars_Tests: StreamChatTestCase {
             currentDateString: nil,
             listId: "listId",
             isMessageThread: false,
+            shouldShowTypingIndicator: false,
             onMessageAppear: { _ in },
             onScrollToBottom: {},
             onLongPress: { _ in }

StreamChatSwiftUITests/Tests/ChatChannel/MessageListView_Tests.swift

@@ -69,6 +69,7 @@ class MessageListView_Tests: StreamChatTestCase {
             currentDateString: nil,
             listId: "listId",
             isMessageThread: false,
+            shouldShowTypingIndicator: false,
             onMessageAppear: { _ in },
             onScrollToBottom: {},
             onLongPress: { _ in }