Fixes #2286 - Timeline entries flickering when a lot of mention pills present

ElementX/Sources/Other/Extensions/AttributedString.swift

@@ -18,7 +18,12 @@ import Foundation
 
 extension AttributedString {
     var formattedComponents: [AttributedStringBuilderComponent] {
-        runs[\.blockquote].map { value, range in
+        var components = [AttributedStringBuilderComponent]()
+        
+        for (index, run) in runs[\.blockquote].enumerated() {
+            let value = run.0
+            let range = run.1
+            
             var attributedString = AttributedString(self[range])
             
             // Remove trailing new lines if any
@@ -29,8 +34,10 @@ extension AttributedString {
             
             let isBlockquote = value != nil
             
-            return AttributedStringBuilderComponent(attributedString: attributedString, isBlockquote: isBlockquote)
+            components.append(AttributedStringBuilderComponent(id: index, attributedString: attributedString, isBlockquote: isBlockquote))
         }
+        
+        return components
     }
     
     /// Replaces the specified placeholder with a string that links to the specified URL.

ElementX/Sources/Other/HTMLParsing/AttributedStringBuilderProtocol.swift

@@ -16,7 +16,8 @@
 
 import Foundation
 
-struct AttributedStringBuilderComponent: Hashable {
+struct AttributedStringBuilderComponent: Hashable, Identifiable {
+    let id: Int
     let attributedString: AttributedString
     let isBlockquote: Bool
 }

ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift

@@ -93,7 +93,7 @@ struct FormattedBodyText: View {
     /// The attributed components laid out for the bubbles timeline style.
     var bubbleLayout: some View {
         TimelineBubbleLayout(spacing: 8) {
-            ForEach(attributedComponents, id: \.self) { component in
+            ForEach(attributedComponents) { component in
                 // Ignore if the string contains only the layout correction
                 if String(component.attributedString.characters) == layoutDirection.isolateLayoutUnicodeString {
                     EmptyView()
@@ -123,7 +123,7 @@ struct FormattedBodyText: View {
             
             // Make a second iteration through the components adding fixed width blockquotes
             // which are used for layout calculations but won't be rendered.
-            ForEach(attributedComponents, id: \.self) { component in
+            ForEach(attributedComponents) { component in
                 if component.isBlockquote {
                     MessageText(attributedString: component.attributedString.mergingAttributes(blockquoteAttributes))
                         .fixedSize(horizontal: false, vertical: true)
@@ -138,7 +138,7 @@ struct FormattedBodyText: View {
     /// The attributed components laid out for the plain timeline style.
     var plainLayout: some View {
         VStack(alignment: .leading, spacing: 8.0) {
-            ForEach(attributedComponents, id: \.self) { component in
+            ForEach(attributedComponents) { component in
                 if component.isBlockquote {
                     HStack(spacing: 4.0) {
                         Rectangle()

changelog.d/2286.bugfix

@@ -0,0 +1 @@
+Fix timeline entries flickering when a lot of mention pills present