implemented typing indicator view in the channel list item

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannelList/ChatChannelListItem.swift

@@ -46,7 +46,13 @@ public struct ChatChannelListItem: View {
                                 Spacer()
                             }
                         } else {
-                            SubtitleText(text: subtitleText)
+                            HStack(spacing: 4) {
+                                if !channel.currentlyTypingUsers.isEmpty {
+                                    TypingIndicatorView()
+                                }
+                                SubtitleText(text: subtitleText)
+                                Spacer()
+                            }
                         }
                     }
 

Sources/StreamChatSwiftUI/CommonViews/TypingIndicatorView.swift

@@ -0,0 +1,55 @@
+//
+// Copyright © 2022 Stream.io Inc. All rights reserved.
+//
+
+import SwiftUI
+
+/// View shown when other users are typing.
+struct TypingIndicatorView: View {
+    
+    @State private var isTyping = false
+    
+    private let animationDuration: CGFloat = 0.75
+    
+    var body: some View {
+        HStack(spacing: 4) {
+            TypingIndicatorCircle(isTyping: isTyping)
+                .animation(
+                    .easeOut(duration: animationDuration)
+                        .repeatForever(autoreverses: true), value: isTyping
+                )
+            TypingIndicatorCircle(isTyping: isTyping)
+                .animation(
+                    .easeInOut(duration: animationDuration)
+                        .repeatForever(autoreverses: true), value: isTyping
+                )
+            TypingIndicatorCircle(isTyping: isTyping)
+                .animation(
+                    .easeIn(duration: animationDuration)
+                        .repeatForever(autoreverses: true), value: isTyping
+                )
+        }
+        .onAppear {
+            isTyping = true
+        }
+    }
+}
+
+/// View that represents one circle of the typing indicator view.
+private struct TypingIndicatorCircle: View {
+    
+    private let circleWidth: CGFloat = 4
+    private let circleHeight: CGFloat = 4
+    private let yOffset: CGFloat = 1.5
+    private let minOpacity: CGFloat = 0.1
+    private let maxOpacity: CGFloat = 1.0
+    
+    var isTyping: Bool
+    
+    var body: some View {
+        Circle()
+            .frame(width: circleWidth, height: circleHeight)
+            .opacity(isTyping ? maxOpacity : minOpacity)
+            .offset(y: isTyping ? yOffset : -yOffset)
+    }
+}

StreamChatSwiftUI.xcodeproj/project.pbxproj

@@ -152,6 +152,7 @@
 		8465FDD72746A95800AF091E /* Appearance.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8465FD692746A95700AF091E /* Appearance.swift */; };
 		8465FDD82746AA2700AF091E /* StreamChatSwiftUI.h in Headers */ = {isa = PBXBuildFile; fileRef = 8465FD602746A95700AF091E /* StreamChatSwiftUI.h */; settings = {ATTRIBUTES = (Public, ); }; };
 		8465FDDD2747A14700AF091E /* CustomComposerAttachmentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8465FDDC2747A14700AF091E /* CustomComposerAttachmentView.swift */; };
+		846608E3278C303800D3D7B3 /* TypingIndicatorView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 846608E2278C303800D3D7B3 /* TypingIndicatorView.swift */; };
 		848399EA275FB3E9003075E4 /* SnapshotTesting in Frameworks */ = {isa = PBXBuildFile; productRef = 848399E9275FB3E9003075E4 /* SnapshotTesting */; };
 		848399EC275FB41B003075E4 /* ChatChannelListView_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 848399EB275FB41B003075E4 /* ChatChannelListView_Tests.swift */; };
 		848399F227601231003075E4 /* ReactionsOverlayView_Tests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 848399F127601231003075E4 /* ReactionsOverlayView_Tests.swift */; };
@@ -453,6 +454,7 @@
 		8465FD682746A95700AF091E /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		8465FD692746A95700AF091E /* Appearance.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Appearance.swift; sourceTree = "<group>"; };
 		8465FDDC2747A14700AF091E /* CustomComposerAttachmentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomComposerAttachmentView.swift; sourceTree = "<group>"; };
+		846608E2278C303800D3D7B3 /* TypingIndicatorView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TypingIndicatorView.swift; sourceTree = "<group>"; };
 		848399EB275FB41B003075E4 /* ChatChannelListView_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatChannelListView_Tests.swift; sourceTree = "<group>"; };
 		848399F127601231003075E4 /* ReactionsOverlayView_Tests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReactionsOverlayView_Tests.swift; sourceTree = "<group>"; };
 		849CDD932768E0E1003C7A51 /* MessageActionsResolver.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessageActionsResolver.swift; sourceTree = "<group>"; };
@@ -771,6 +773,7 @@
 				8434E582277088D9001E1B83 /* TitleWithCloseButton.swift */,
 				84AB7B1C2771F4AA00631A10 /* DiscardButtonView.swift */,
 				8465FD4B2746A95600AF091E /* LoadingView.swift */,
+				846608E2278C303800D3D7B3 /* TypingIndicatorView.swift */,
 			);
 			path = CommonViews;
 			sourceTree = "<group>";
@@ -1445,6 +1448,7 @@
 				8465FDAB2746A95700AF091E /* StringExtensions.swift in Sources */,
 				8465FDA52746A95700AF091E /* Modifiers.swift in Sources */,
 				8465FDBB2746A95700AF091E /* LoadingView.swift in Sources */,
+				846608E3278C303800D3D7B3 /* TypingIndicatorView.swift in Sources */,
 				8465FD9C2746A95700AF091E /* MessageActionsView.swift in Sources */,
 				8465FD6E2746A95700AF091E /* DependencyInjection.swift in Sources */,
 				841B64D62775FDA00016FF3B /* InstantCommandsHandler.swift in Sources */,