Visual issues with new messages

[fceldeiro]

What did you do?

The animation when receiving new messages feels off/broken very often. The new messages go behind the existing one instead of pushing the rest of the messages which looks like a glitch. In this example i have no transition set, and i've tried with multiple but i can't find anything that properly works without having a glitch of some type.

let messageDisplayOptions = MessageDisplayOptions(spacerWidth: { _ in 40 })

What did you expect to happen?

I would expect the message to be pushed without visual glitches.

What happened instead?

https://github.com/GetStream/stream-chat-swiftui/assets/1914557/8559ff12-70e5-45ff-958c-945aaa31b714

GetStream Environment

GetStream Chat version: 4.52.0 GetStream Chat frameworks: StreamChatSwiftUI iOS version: 17.4 Swift version: 5+ Xcode version: 15.3 Device: iPhone 15

Additional context

[martinmitrevski]

Hi @fceldeiro,

Have you tried the otherUserMessageTransition and currentUserMessageTransition options? https://getstream.io/chat/docs/sdk/ios/swiftui/message-components/message-display-options/

You can build your own transitions, e.g. slide, and combine it with other ones, e.g.:

AnyTransition.slide
                .combined(with: AnyTransition.offset(
                     x: UIScreen.main.bounds.width / 2.0,
                     y: -80)
)

Hope that helps, Martin

[fceldeiro]

Hello @martinmitrevski thanks for the quick reply. I've tried a few transitions, the one that looks more correct would be

.asymmetric(insertion: .move(edge: .top), removal: .opacity)

The need for using .top instead of the .bottom is due to the inverted list?

[martinmitrevski]

Hey @fceldeiro,

Yes, that's correct - it's because of the inverted list.

Closing this ticket.

Best, Martin