Various optimisations (#1878)

* Cache TimelineBubbleLayout subview sizes

* Cache MessageText sizes, avoid extra updates

* Only use the `CollapsibleReactionLayout` if there's more than 5 reactions on a particular message

* Upgrade Sentry to 8.13.0, disable various options as they're not useful and impact performance

* Address PR comments, fix unit tests

ElementX/Sources/Other/Extensions/ProposedViewSize.swift

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+extension ProposedViewSize: Hashable {
+    public func hash(into hasher: inout Hasher) {
+        hasher.combine(width)
+        hasher.combine(height)
+    }
+}

ElementX/Sources/Other/Pills/MessageText.swift

@@ -49,7 +49,13 @@ final class MessageTextView: UITextView {
 struct MessageText: UIViewRepresentable {
     @Environment(\.openURL) private var openURLAction: OpenURLAction
     @EnvironmentObject private var viewModel: RoomScreenViewModel.Context
-    @State var attributedString: AttributedString
+    @State private var computedSizes = [Double: CGSize]()
+    
+    @State var attributedString: AttributedString {
+        didSet {
+            computedSizes.removeAll()
+        }
+    }
 
     func makeUIView(context: Context) -> MessageTextView {
         // Need to use TextKit 1 for mentions
@@ -81,13 +87,20 @@ struct MessageText: UIViewRepresentable {
         return textView
     }
 
-    func updateUIView(_ uiView: MessageTextView, context: Context) {
-        uiView.attributedText = NSAttributedString(attributedString)
-        context.coordinator.openURLAction = openURLAction
-    }
+    func updateUIView(_ uiView: MessageTextView, context: Context) { }
 
     func sizeThatFits(_ proposal: ProposedViewSize, uiView: MessageTextView, context: Context) -> CGSize? {
-        uiView.sizeThatFits(CGSize(width: proposal.width ?? UIView.layoutFittingExpandedSize.width, height: UIView.layoutFittingCompressedSize.height))
+        let proposalWidth = proposal.width ?? UIView.layoutFittingExpandedSize.width
+        
+        if let size = computedSizes[proposalWidth] {
+            return size
+        }
+        
+        let size = uiView.sizeThatFits(CGSize(width: proposalWidth, height: UIView.layoutFittingCompressedSize.height))
+        DispatchQueue.main.async {
+            computedSizes[proposalWidth] = size
+        }
+        return size
     }
 
     func makeCoordinator() -> Coordinator {

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineBubbleLayout.swift

@@ -21,6 +21,10 @@ import SwiftUI
 /// A custom layout is required as the embedded quote bubbles should fill the entire width of
 /// the message bubble, without causing the width of the bubble to fill all of the available space.
 struct TimelineBubbleLayout: Layout {
+    struct Cache {
+        var sizes = [Int: [ProposedViewSize: CGSize]]()
+    }
+    
     /// The spacing between the components in the bubble.
     let spacing: CGFloat
     
@@ -36,13 +40,23 @@ struct TimelineBubbleLayout: Layout {
         static let regularText: Double = 1
     }
     
-    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+    func makeCache(subviews: Subviews) -> Cache {
+        Cache()
+    }
+    
+    func updateCache(_ cache: inout Cache, subviews: Subviews) {
+        // A subview changed, reset everything
+        cache = Cache()
+    }
+    
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> CGSize {
         guard !subviews.isEmpty else { return .zero }
         
         // Calculate the natural size using the regular text and non-greedy quote bubbles.
         let layoutSubviews = subviews.filter { $0.priority != Priority.visibleQuote }
+
+        let subviewSizes = layoutSubviews.map { size(for: $0, subviews: subviews, proposedSize: proposal, cache: &cache) }
         
-        let subviewSizes = layoutSubviews.map { $0.sizeThatFits(proposal) }
         let maxWidth = subviewSizes.map(\.width).reduce(0, max)
         let totalHeight = subviewSizes.map(\.height).reduce(0, +)
         let totalSpacing = CGFloat(layoutSubviews.count - 1) * spacing
@@ -50,16 +64,17 @@ struct TimelineBubbleLayout: Layout {
         return CGSize(width: maxWidth, height: totalHeight + totalSpacing)
     }
     
-    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) {
         guard !subviews.isEmpty else { return }
         
         // Calculate the width using the regular text and the non-greedy quote bubbles.
         let layoutSubviews = subviews.filter { $0.priority != Priority.visibleQuote }
-        let maxWidth = layoutSubviews.map { $0.sizeThatFits(proposal).width }.reduce(0, max)
+        let maxWidth = layoutSubviews.map { size(for: $0, subviews: subviews, proposedSize: proposal, cache: &cache).width }.reduce(0, max)
         
         // Place the regular text and greedy quote bubbles using the calculated width.
         let visibleSubviews = subviews.filter { $0.priority != Priority.hiddenQuote }
-        let subviewSizes = visibleSubviews.map { $0.sizeThatFits(ProposedViewSize(width: maxWidth, height: proposal.height)) }
+
+        let subviewSizes = visibleSubviews.map { size(for: $0, subviews: subviews, proposedSize: ProposedViewSize(width: maxWidth, height: proposal.height), cache: &cache) }
         
         var y = bounds.minY
         for index in visibleSubviews.indices {
@@ -70,4 +85,25 @@ struct TimelineBubbleLayout: Layout {
             y += height + spacing
         }
     }
+    
+    // MARK: - Private
+    
+    private func size(for subview: LayoutSubview, subviews: LayoutSubviews, proposedSize: ProposedViewSize, cache: inout Cache) -> CGSize {
+        guard let index = subviews.firstIndex(of: subview) else {
+            fatalError()
+        }
+        
+        if cache.sizes[index] == nil {
+            cache.sizes[index] = [:]
+        }
+        
+        if let cachedSize = cache.sizes[index]?[proposedSize] {
+            return cachedSize
+        }
+        
+        let size = subview.sizeThatFits(proposedSize)
+        
+        cache.sizes[index]?[proposedSize] = size
+        return size
+    }
 }

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineReactionsView.swift

@@ -32,9 +32,9 @@ struct TimelineReactionsView: View {
         guard isLayoutRTL else { return layoutDirection }
         return layoutDirection == .leftToRight ? .rightToLeft : .leftToRight
     }
-        
+    
     var body: some View {
-        CollapsibleReactionLayout(itemSpacing: 4, rowSpacing: 4, collapsed: collapsed, rowsBeforeCollapsible: 2) {
+        layout {
             ForEach(reactions, id: \.self) { reaction in
                 TimelineReactionButton(reaction: reaction) { key in
                     feedbackGenerator.impactOccurred()
@@ -45,14 +45,18 @@ struct TimelineReactionsView: View {
                 .reactionLayoutItem(.reaction)
                 .environment(\.layoutDirection, layoutDirection)
             }
-            Button {
-                collapsed.toggle()
-            } label: {
-                TimelineCollapseButtonLabel(collapsed: collapsed)
-                    .transaction { $0.animation = nil }
+            
+            if isCollapsible {
+                Button {
+                    collapsed.toggle()
+                } label: {
+                    TimelineCollapseButtonLabel(collapsed: collapsed)
+                        .transaction { $0.animation = nil }
+                }
+                .reactionLayoutItem(.expandCollapse)
+                .environment(\.layoutDirection, layoutDirection)
             }
-            .reactionLayoutItem(.expandCollapse)
-            .environment(\.layoutDirection, layoutDirection)
+            
             Button {
                 context.send(viewAction: .displayEmojiPicker(itemID: itemID))
             } label: {
@@ -64,6 +68,23 @@ struct TimelineReactionsView: View {
         .animation(.easeInOut(duration: 0.1).disabledDuringTests(), value: reactions)
         .padding(.leading, 4)
     }
+    
+    // MARK: - Private
+    
+    private var isCollapsible: Bool {
+        reactions.count > 5
+    }
+    
+    private var layout: AnyLayout {
+        if isCollapsible {
+            return AnyLayout(CollapsibleReactionLayout(itemSpacing: 4,
+                                                       rowSpacing: 4,
+                                                       collapsed: collapsed,
+                                                       rowsBeforeCollapsible: 2))
+        }
+        
+        return AnyLayout(HStackLayout(spacing: 4.0))
+    }
 }
 
 /// The pill shape for the label that surrounds both the reaction and collapse buttons.
@@ -159,10 +180,8 @@ struct TimelineReactionAddMoreButtonLabel: View {
             Image(asset: Asset.Images.addReaction)
                 .resizable()
                 .frame(width: addMoreButtonIconSize, height: addMoreButtonIconSize)
-                // Vertical sizing is done by the layout so that the add more button
-                // matches the height of the text based buttons.
-                .padding(.horizontal, 10)
-                .frame(maxHeight: .infinity, alignment: .center)
+                .padding(.vertical, 8)
+                .padding(.horizontal, 12)
                 .foregroundColor(.compound.iconSecondary)
         }
     }

ElementX/Sources/Services/BugReport/BugReportService.swift

@@ -69,6 +69,14 @@ class BugReportService: NSObject, BugReportServiceProtocol {
             
             options.dsn = self.sentryURL.absoluteString
             
+            // Sentry swizzling shows up quite often as the heaviest stack trace when profiling
+            // We don't need any of the features it powers (see docs)
+            options.enableSwizzling = false
+            
+            // WatchdogTermination is currently the top issue but we've had zero complaints
+            // so it might very well just all be false positives
+            options.enableWatchdogTerminationTracking = false
+            
             // Disabled as it seems to report a lot of false positives
             options.enableAppHangTracking = false
             
@@ -79,7 +87,7 @@ class BugReportService: NSObject, BugReportServiceProtocol {
             options.enableAutoBreadcrumbTracking = false
             
             // Experimental. Stitches stack traces of asynchronous code together
-            options.stitchAsyncCode = true
+            options.swiftAsyncStacktraces = true
 
             // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
             // We recommend adjusting this value in production.