Optimise channel list view updates (#561)

laevandus · web-flow · commit e4a405e9ffe1 · 2024-07-31T13:00:02.000Z
* Remove explicit view ids in the channel list

* Update swipedChannelId less

* Optimise avatar refreshes by not using observable object on the list level
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,10 +3,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 # Upcoming
 
+### ⚡ Performance
+- Optimise channel list view updates [#561](https://github.com/GetStream/stream-chat-swiftui/pull/561)
+
 ### 🐞 Fixed
 - Media and files attachments not showing in channel info view [#554](https://github.com/GetStream/stream-chat-swiftui/pull/554)
 - Bottom reactions configuration not always updating reactions [#557](https://github.com/GetStream/stream-chat-swiftui/pull/557)
 
+### 🔄 Changed
+- Channel list views do not use explicit id anymore [#561](https://github.com/GetStream/stream-chat-swiftui/pull/561)
+- Deprecate `ChannelAvatarView` initializer `init(avatar:showOnlineIndicator:size:)` in favor of `init(channel:showOnlineIndicator:size:)` [#561](https://github.com/GetStream/stream-chat-swiftui/pull/561)
+
 # [4.60.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.60.0)
 _July 19, 2024_
 
diff --git a/DemoAppSwiftUI/PinChannelHelpers.swift b/DemoAppSwiftUI/PinChannelHelpers.swift
@@ -40,7 +40,7 @@ struct DemoAppChatChannelListItem: View {
         } label: {
             HStack {
                 ChannelAvatarView(
-                    avatar: avatar,
+                    channel: channel,
                     showOnlineIndicator: onlineIndicatorShown
                 )
 
@@ -83,7 +83,6 @@ struct DemoAppChatChannelListItem: View {
         .foregroundColor(.black)
         .disabled(disabled)
         .background(channel.isPinned ? Color(colors.pinnedBackground) : .clear)
-        .id("\(channel.id)-\(channel.isPinned ? "pinned" : "not-pinned")-base")
     }
 
     private var subtitleView: some View {
@@ -173,7 +172,6 @@ struct DemoAppChatChannelNavigatableListItem<ChannelDestination: View>: View {
                 EmptyView()
             }
         }
-        .id("\(channel.id)-\(channel.isPinned ? "pinned" : "not-pinned")-base")
     }
 
     private var injectedChannelInfo: InjectedChannelInfo? {
diff --git a/DemoAppSwiftUI/WhatsAppChannelHeader.swift b/DemoAppSwiftUI/WhatsAppChannelHeader.swift
@@ -53,7 +53,7 @@ struct WhatsAppChannelHeader: ToolbarContent {
         ToolbarItem(placement: .principal) {
             HStack {
                 ChannelAvatarView(
-                    avatar: channelHeaderLoader.image(for: channel),
+                    channel: channel,
                     showOnlineIndicator: false,
                     size: CGSize(width: 36, height: 36)
                 )
diff --git a/DemoAppSwiftUI/iMessagePocView.swift b/DemoAppSwiftUI/iMessagePocView.swift
@@ -33,7 +33,7 @@ struct iMessagePocView: View {
                         HStack {
                             ForEach(viewModel.pinnedChannels) { channel in
                                 ChannelAvatarView(
-                                    avatar: channelHeaderLoader.image(for: channel),
+                                    channel: channel,
                                     showOnlineIndicator: false
                                 )
                                 .padding()
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/ChannelHeaderLoader.swift b/Sources/StreamChatSwiftUI/ChatChannelList/ChannelHeaderLoader.swift
@@ -2,6 +2,7 @@
 // Copyright © 2024 Stream.io Inc. All rights reserved.
 //
 
+import Combine
 import Foundation
 import StreamChat
 import UIKit
@@ -15,10 +16,10 @@ open class ChannelHeaderLoader: ObservableObject {
     private let maxNumberOfImagesInCombinedAvatar = 4
 
     /// Prevents image requests to be executed if they failed previously.
-    private var failedImageLoads = Set<String>()
+    private var failedImageLoads = Set<ChannelId>()
 
     /// Batches loaded images for update, to improve performance.
-    private var scheduledUpdate = false
+    private var scheduledUpdates = Set<ChannelId>()
 
     /// Context provided utils.
     internal lazy var imageLoader = utils.imageLoader
@@ -31,18 +32,9 @@ open class ChannelHeaderLoader: ObservableObject {
     internal lazy var placeholder2 = images.userAvatarPlaceholder2
     internal lazy var placeholder3 = images.userAvatarPlaceholder3
     internal lazy var placeholder4 = images.userAvatarPlaceholder4
-
-    var loadedImages = [String: UIImage]() {
-        willSet {
-            if !scheduledUpdate {
-                scheduledUpdate = true
-                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [weak self] in
-                    self?.objectWillChange.send()
-                    self?.scheduledUpdate = false
-                }
-            }
-        }
-    }
+    
+    private var loadedImages = [ChannelId: UIImage]()
+    private let didLoadImage = PassthroughSubject<ChannelId, Never>()
 
     public init() {
         // Public init.
@@ -53,19 +45,19 @@ open class ChannelHeaderLoader: ObservableObject {
     /// - Parameter channel: the provided channel.
     /// - Returns: the available image.
     public func image(for channel: ChatChannel) -> UIImage {
-        if let image = loadedImages[channel.cid.rawValue] {
+        if let image = loadedImages[channel.cid] {
             return image
         }
 
         if let url = channel.imageURL {
-            loadChannelThumbnail(for: channel, from: url)
+            loadChannelThumbnail(for: channel.cid, from: url)
             return placeholder4
         }
 
         if channel.isDirectMessageChannel {
             let lastActiveMembers = self.lastActiveMembers(for: channel)
             if let otherMember = lastActiveMembers.first, let url = otherMember.imageURL {
-                loadChannelThumbnail(for: channel, from: url)
+                loadChannelThumbnail(for: channel.cid, from: url)
                 return placeholder3
             } else {
                 return placeholder4
@@ -84,16 +76,38 @@ open class ChannelHeaderLoader: ObservableObject {
             if urls.isEmpty {
                 return placeholder3
             } else {
-                loadMergedAvatar(from: channel, urls: Array(urls))
+                loadMergedAvatar(from: channel.cid, urls: Array(urls))
                 return placeholder4
             }
         }
     }
 
+    func channelAvatarChanged(_ cid: ChannelId?) -> AnyPublisher<Void, Never> {
+        didLoadImage
+            .filter { $0 == cid }
+            .map { _ in () }
+            .eraseToAnyPublisher()
+    }
+    
     // MARK: - private
 
-    private func loadMergedAvatar(from channel: ChatChannel, urls: [URL]) {
-        if failedImageLoads.contains(channel.cid.rawValue) {
+    private func didFinishedLoading(for cid: ChannelId, image: UIImage) {
+        loadedImages[cid] = image
+        
+        if scheduledUpdates.isEmpty {
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) { [weak self] in
+                guard let self else { return }
+                let updates = self.scheduledUpdates
+                self.scheduledUpdates.removeAll()
+                updates.forEach { self.didLoadImage.send($0) }
+            }
+        }
+        
+        scheduledUpdates.insert(cid)
+    }
+    
+    private func loadMergedAvatar(from cid: ChannelId, urls: [URL]) {
+        if failedImageLoads.contains(cid) {
             return
         }
 
@@ -109,20 +123,20 @@ open class ChannelHeaderLoader: ObservableObject {
                 let image = self.channelAvatarsMerger.createMergedAvatar(from: images)
                 DispatchQueue.main.async {
                     if let image = image {
-                        self.loadedImages[channel.cid.rawValue] = image
+                        self.didFinishedLoading(for: cid, image: image)
                     } else {
-                        self.failedImageLoads.insert(channel.cid.rawValue)
+                        self.failedImageLoads.insert(cid)
                     }
                 }
             }
         }
     }
 
     private func loadChannelThumbnail(
-        for channel: ChatChannel,
+        for cid: ChannelId,
         from url: URL
     ) {
-        if failedImageLoads.contains(channel.cid.rawValue) {
+        if failedImageLoads.contains(cid) {
             return
         }
 
@@ -136,10 +150,10 @@ open class ChannelHeaderLoader: ObservableObject {
             switch result {
             case let .success(image):
                 DispatchQueue.main.async {
-                    self.loadedImages[channel.cid.rawValue] = image
+                    self.didFinishedLoading(for: cid, image: image)
                 }
             case let .failure(error):
-                self.failedImageLoads.insert(channel.cid.rawValue)
+                self.failedImageLoads.insert(cid)
                 log.error("error loading image: \(error.localizedDescription)")
             }
         }
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelList.swift b/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelList.swift
@@ -189,29 +189,7 @@ public struct ChannelsLazyVStack<Factory: ViewFactory>: View {
 
 /// Determines the uniqueness of the channel list item.
 extension ChatChannel: Identifiable {
-    private var mutedString: String {
-        isMuted ? "muted" : "unmuted"
-    }
-
     public var id: String {
-        "\(cid.id)-\(lastMessageAt ?? createdAt)-\(lastActiveMembersCount)-\(mutedString)-\(typingUsersString)-\(readUsersId)-\(unreadCount.messages)"
-    }
-
-    private var readUsersId: String {
-        "\(readUsers(currentUserId: nil, message: latestMessages.first).count)"
-    }
-
-    private var lastActiveMembersCount: Int {
-        lastActiveMembers.filter { member in
-            member.isOnline
-        }
-        .count
-    }
-
-    private var typingUsersString: String {
-        currentlyTypingUsers.map { user in
-            user.id
-        }
-        .joined(separator: "-")
+        cid.rawValue
     }
 }
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift b/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift
@@ -46,7 +46,7 @@ public struct ChatChannelListItem: View {
         } label: {
             HStack {
                 ChannelAvatarView(
-                    avatar: avatar,
+                    channel: channel,
                     showOnlineIndicator: onlineIndicatorShown
                 )
 
@@ -129,24 +129,45 @@ public struct ChatChannelListItem: View {
 
 /// View for the avatar used in channels (includes online indicator overlay).
 public struct ChannelAvatarView: View {
-
-    var avatar: UIImage
-    var showOnlineIndicator: Bool
-    var size: CGSize = .defaultAvatarSize
-
+    @Injected(\.utils) private var utils
+    let avatar: UIImage?
+    let showOnlineIndicator: Bool
+    let size: CGSize
+
+    @State private var channelAvatar = UIImage()
+    let channel: ChatChannel?
+
+    @available(
+        *,
+        deprecated,
+        renamed: "init(channel:showOnlineIndicator:size:)",
+        message: "Use automatically refreshing avatar initializer."
+    )
     public init(
         avatar: UIImage,
         showOnlineIndicator: Bool,
         size: CGSize = .defaultAvatarSize
     ) {
         self.avatar = avatar
+        channel = nil
+        self.showOnlineIndicator = showOnlineIndicator
+        self.size = size
+    }
+    
+    public init(
+        channel: ChatChannel,
+        showOnlineIndicator: Bool,
+        size: CGSize = .defaultAvatarSize
+    ) {
+        avatar = nil
+        self.channel = channel
         self.showOnlineIndicator = showOnlineIndicator
         self.size = size
     }
 
     public var body: some View {
         LazyView(
-            AvatarView(avatar: avatar, size: size)
+            AvatarView(avatar: image, size: size)
                 .overlay(
                     showOnlineIndicator ?
                         TopRightView {
@@ -155,9 +176,26 @@ public struct ChannelAvatarView: View {
                         .offset(x: 3, y: -1)
                         : nil
                 )
+                .onLoad {
+                    reloadAvatar()
+                }
+                .onReceive(channelHeaderLoader.channelAvatarChanged(channel?.cid)) { _ in
+                    reloadAvatar()
+                }
         )
         .accessibilityIdentifier("ChannelAvatarView")
     }
+    
+    private var channelHeaderLoader: ChannelHeaderLoader { utils.channelHeaderLoader }
+    
+    private var image: UIImage {
+        avatar ?? channelAvatar
+    }
+    
+    private func reloadAvatar() {
+        guard let channel else { return }
+        channelAvatar = utils.channelHeaderLoader.image(for: channel)
+    }
 }
 
 /// View used for the online indicator.
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListView.swift b/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListView.swift
@@ -182,7 +182,7 @@ public struct ChatChannelListContentView<Factory: ViewFactory>: View {
 
     private var viewFactory: Factory
     @ObservedObject private var viewModel: ChatChannelListViewModel
-    @ObservedObject private var channelHeaderLoader = InjectedValues[\.utils].channelHeaderLoader
+    private var channelHeaderLoader: ChannelHeaderLoader { InjectedValues[\.utils].channelHeaderLoader }
     private var onItemTap: (ChatChannel) -> Void
 
     public init(
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelNavigatableListItem.swift b/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelNavigatableListItem.swift
@@ -58,7 +58,6 @@ public struct ChatChannelNavigatableListItem<ChannelDestination: View>: View {
                 EmptyView()
             }
         }
-        .id("\(channel.id)-navigatable")
     }
 
     private var injectedChannelInfo: InjectedChannelInfo? {
diff --git a/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelSwipeableListItem.swift b/Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelSwipeableListItem.swift
@@ -107,7 +107,6 @@ public struct ChatChannelSwipeableListItem<Factory: ViewFactory, ChannelListItem
                 setOffsetX(value: 0)
             }
         })
-        .id("\(channel.id)-swipeable")
         .accessibilityIdentifier("ChatChannelSwipeableListItem")
     }
 
@@ -175,15 +174,23 @@ public struct ChatChannelSwipeableListItem<Factory: ViewFactory, ChannelListItem
             self.offsetX = value
         }
         if offsetX == 0 {
-            openSideLock = nil
-            swipedChannelId = nil
+            if openSideLock != nil {
+                openSideLock = nil
+            }
+            if swipedChannelId != nil {
+                swipedChannelId = nil
+            }
         }
     }
 
     private func dragEnded() {
         if offsetX == 0 {
-            swipedChannelId = nil
-            openSideLock = nil
+            if swipedChannelId != nil {
+                swipedChannelId = nil
+            }
+            if openSideLock != nil {
+                openSideLock = nil
+            }
         } else if offsetX > 0 && showLeadingSwipeActions {
             if offsetX.magnitude < openTriggerValue ||
                 offsetX < menuWidth * 0.8 {
diff --git a/Sources/StreamChatSwiftUI/Utils/Common/OnLoadViewModifier.swift b/Sources/StreamChatSwiftUI/Utils/Common/OnLoadViewModifier.swift
diff --git a/StreamChatSwiftUI.xcodeproj/project.pbxproj b/StreamChatSwiftUI.xcodeproj/project.pbxproj
diff --git a/StreamChatSwiftUITests/Tests/ChatChannelList/ChatChannelListItemView_Tests.swift b/StreamChatSwiftUITests/Tests/ChatChannelList/ChatChannelListItemView_Tests.swift

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ struct DemoAppChatChannelListItem: View {`
`40`	`40`	`} label: {`
`41`	`41`	`HStack {`
`42`	`42`	`ChannelAvatarView(`
`43`		`- avatar: avatar,`
	`43`	`+ channel: channel,`
`44`	`44`	`showOnlineIndicator: onlineIndicatorShown`
`45`	`45`	`)`
`46`	`46`
`@@ -83,7 +83,6 @@ struct DemoAppChatChannelListItem: View {`
`83`	`83`	`.foregroundColor(.black)`
`84`	`84`	`.disabled(disabled)`
`85`	`85`	`.background(channel.isPinned ? Color(colors.pinnedBackground) : .clear)`
`86`		`- .id("\(channel.id)-\(channel.isPinned ? "pinned" : "not-pinned")-base")`
`87`	`86`	`}`
`88`	`87`
`89`	`88`	`private var subtitleView: some View {`
`@@ -173,7 +172,6 @@ struct DemoAppChatChannelNavigatableListItem<ChannelDestination: View>: View {`
`173`	`172`	`EmptyView()`
`174`	`173`	`}`
`175`	`174`	`}`
`176`		`- .id("\(channel.id)-\(channel.isPinned ? "pinned" : "not-pinned")-base")`
`177`	`175`	`}`
`178`	`176`
`179`	`177`	`private var injectedChannelInfo: InjectedChannelInfo? {`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ struct WhatsAppChannelHeader: ToolbarContent {`
`53`	`53`	`ToolbarItem(placement: .principal) {`
`54`	`54`	`HStack {`
`55`	`55`	`ChannelAvatarView(`
`56`		`- avatar: channelHeaderLoader.image(for: channel),`
	`56`	`+ channel: channel,`
`57`	`57`	`showOnlineIndicator: false,`
`58`	`58`	`size: CGSize(width: 36, height: 36)`
`59`	`59`	`)`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ struct iMessagePocView: View {`
`33`	`33`	`HStack {`
`34`	`34`	`ForEach(viewModel.pinnedChannels) { channel in`
`35`	`35`	`ChannelAvatarView(`
`36`		`- avatar: channelHeaderLoader.image(for: channel),`
	`36`	`+ channel: channel,`
`37`	`37`	`showOnlineIndicator: false`
`38`	`38`	`)`
`39`	`39`	`.padding()`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,6 @@ public struct ChatChannelNavigatableListItem<ChannelDestination: View>: View {`
`58`	`58`	`EmptyView()`
`59`	`59`	`}`
`60`	`60`	`}`
`61`		`- .id("\(channel.id)-navigatable")`
`62`	`61`	`}`
`63`	`62`
`64`	`63`	`private var injectedChannelInfo: InjectedChannelInfo? {`