Improved the animation when opening quoted message

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/Composer/ComposerHelperViews.swift

@@ -147,23 +147,32 @@ struct QuotedMessageHeaderView: View {
 
     @Binding var quotedMessage: ChatMessage?
 
+    @State var showContent = false
+    
     var body: some View {
         ZStack {
-            Text(L10n.Composer.Title.reply)
-                .font(fonts.bodyBold)
-            
-            HStack {
-                Spacer()
-                Button(action: {
-                    withAnimation {
-                        quotedMessage = nil
-                    }
-                }, label: {
-                    DiscardButtonView()
-                })
+            if showContent {
+                Text(L10n.Composer.Title.reply)
+                    .font(fonts.bodyBold)
+                
+                HStack {
+                    Spacer()
+                    Button(action: {
+                        withAnimation {
+                            quotedMessage = nil
+                        }
+                    }, label: {
+                        DiscardButtonView()
+                    })
+                }
             }
         }
         .frame(height: 32)
+        .onAppear() {
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.25) {
+                showContent = true
+            }
+        }
     }
 }
 

StreamChatSwiftUITests/Tests/ChatChannel/MessageComposerView_Tests.swift

@@ -167,4 +167,21 @@ class MessageComposerView_Tests: StreamChatTestCase {
         XCTAssert(coordinator.textInput.selectedRangeLocation == 3)
         XCTAssert(coordinator.textInput.text == "New text")
     }
+    
+    func test_quotedMessageHeaderView_snapshot() {
+        // Given
+        let message = ChatMessage.mock(
+            id: .unique,
+            cid: .unique,
+            text: "Quoted message",
+            author: .mock(id: .unique)
+        )
+        
+        // When
+        let view = QuotedMessageHeaderView(quotedMessage: .constant(message), showContent: true)
+            .frame(width: defaultScreenSize.width, height: 36)
+        
+        // Then
+        assertSnapshot(matching: view, as: .image)
+    }
 }