Use a UITableView component for the timeline.

ElementX/Resources/Localizations/en.lproj/Untranslated.strings

@@ -16,6 +16,7 @@
 
 "room_timeline_replying_to" = "Replying to %@";
 "room_timeline_editing" = "Editing";
+"room_timeline_syncing" = "Syncing";
 
 "session_verification_banner_title" = "Help keep your messages secure";
 "session_verification_banner_message" = "Looks like you’re using a new device. Verify its you.";

ElementX/Sources/Generated/Strings+Untranslated.swift

@@ -38,6 +38,8 @@ extension ElementL10n {
   public static let roomTimelineStyleBubbledLongDescription = ElementL10n.tr("Untranslated", "room_timeline_style_bubbled_long_description")
   /// Plain Timeline
   public static let roomTimelineStylePlainLongDescription = ElementL10n.tr("Untranslated", "room_timeline_style_plain_long_description")
+  /// Syncing
+  public static let roomTimelineSyncing = ElementL10n.tr("Untranslated", "room_timeline_syncing")
   /// Would you like to submit a bug report?
   public static let screenshotDetectedMessage = ElementL10n.tr("Untranslated", "screenshot_detected_message")
   /// You took a screenshot

ElementX/Sources/Other/ScrollViewAdapter.swift

@@ -25,30 +25,29 @@ class ScrollViewAdapter: NSObject, UIScrollViewDelegate {
         }
     }
 
-    var isScrolling = PassthroughSubject<Bool, Never>()
+    var isScrolling = CurrentValueSubject<Bool, Never>(false)
 
-    private func update() {
-        guard let scrollView else { return }
+    private func update(_ scrollView: UIScrollView) {
         isScrolling.send(scrollView.isDragging || scrollView.isDecelerating)
     }
 
     func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
-        update()
+        update(scrollView)
     }
 
     func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
-        update()
+        update(scrollView)
     }
 
     func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
-        update()
+        update(scrollView)
     }
 
     func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
-        update()
+        update(scrollView)
     }
 
     func scrollViewDidScrollToTop(_ scrollView: UIScrollView) {
-        update()
+        update(scrollView)
     }
 }

ElementX/Sources/Screens/RoomScreen/RoomScreenModels.swift

@@ -14,7 +14,7 @@
 // limitations under the License.
 //
 
-import Foundation
+import Combine
 import UIKit
 
 enum RoomScreenViewModelAction {
@@ -29,7 +29,7 @@ enum RoomScreenComposerMode: Equatable {
 }
 
 enum RoomScreenViewAction {
-    case loadPreviousPage
+    case paginateBackwards
     case itemAppeared(id: String)
     case itemDisappeared(id: String)
     case itemTapped(id: String)
@@ -56,12 +56,22 @@ struct RoomScreenViewState: BindableState {
     var sendButtonDisabled: Bool {
         bindings.composerText.count == 0
     }
+
+    let scrollToBottomPublisher = PassthroughSubject<Void, Never>()
+
+    /// Returns the opacity that the supplied timeline item's cell should be.
+    func opacity(for item: RoomTimelineViewProvider) -> CGFloat {
+        guard case let .reply(selectedItemID, _) = composerMode else { return 1.0 }
+        return selectedItemID == item.id ? 1.0 : 0.5
+    }
 }
 
 struct RoomScreenViewStateBindings {
     var composerText: String
     var composerFocused: Bool
 
+    var scrollToBottomButtonVisible = false
+
     /// Information describing the currently displayed alert.
     var alertInfo: AlertInfo<RoomScreenErrorType>?
 

ElementX/Sources/Screens/RoomScreen/RoomScreenViewModel.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Combine
 import SwiftUI
 
 typealias RoomScreenViewModelType = StateStoreViewModel<RoomScreenViewState, RoomScreenViewAction>
@@ -26,6 +27,9 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
     private let timelineController: RoomTimelineControllerProtocol
     private let timelineViewFactory: RoomTimelineViewFactoryProtocol
     private let mediaProvider: MediaProviderProtocol
+
+    /// A publisher used to throttle back pagination requests.
+    private let paginateBackwardsPublisher = PassthroughSubject<Void, Never>()
 
     // MARK: - Setup
 
@@ -60,14 +64,26 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
                     self.state.items[viewIndex] = timelineViewFactory.buildTimelineViewFor(timelineItem: timelineItem)
                 case .startedBackPaginating:
                     self.state.isBackPaginating = true
+                    ServiceLocator.shared.userNotificationController.submitNotification(UserNotification(id: "pagination",
+                                                                                                         type: .toast,
+                                                                                                         title: ElementL10n.roomTimelineSyncing,
+                                                                                                         persistent: true))
                 case .finishedBackPaginating:
                     self.state.isBackPaginating = false
+                    ServiceLocator.shared.userNotificationController.retractNotificationWithId("pagination")
                 }
             }
             .store(in: &cancellables)
 
         state.contextMenuBuilder = buildContexMenuForItemId(_:)
 
+        paginateBackwardsPublisher
+            .collect(.byTime(DispatchQueue.main, 0.1))
+            .sink { [weak self] _ in
+                Task { await self?.paginateBackwards() }
+            }
+            .store(in: &cancellables)
+
         buildTimelineViews()
 
         if let roomAvatarUrl {
@@ -86,11 +102,8 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
 
     override func process(viewAction: RoomScreenViewAction) async {
         switch viewAction {
-        case .loadPreviousPage:
-            switch await timelineController.paginateBackwards(Constants.backPaginationPageSize) {
-            default:
-                #warning("Treat errors")
-            }
+        case .paginateBackwards:
+            paginateBackwardsPublisher.send(())
         case .itemAppeared(let id):
             await timelineController.processItemAppearance(id)
         case .itemDisappeared(let id):
@@ -118,6 +131,13 @@ class RoomScreenViewModel: RoomScreenViewModelType, RoomScreenViewModelProtocol
     }
 
     // MARK: - Private
+
+    private func paginateBackwards() async {
+        switch await timelineController.paginateBackwards(Constants.backPaginationPageSize) {
+        default:
+            #warning("Treat errors")
+        }
+    }
 
     private func itemTapped(with itemId: String) async {
         state.showLoading = true

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

@@ -17,51 +17,70 @@
 import SwiftUI
 
 struct RoomScreen: View {
+    @ObservedObject private var settings = ElementSettings.shared
     @ObservedObject var context: RoomScreenViewModel.Context
 
     var body: some View {
-        ZStack {
-            VStack(spacing: 0.0) {
-                TimelineView()
-                    .environmentObject(context)
-
-                MessageComposer(text: $context.composerText,
-                                focused: $context.composerFocused,
-                                sendingDisabled: context.viewState.sendButtonDisabled,
-                                type: context.viewState.composerMode) {
-                    sendMessage()
-                } replyCancellationAction: {
-                    context.send(viewAction: .cancelReply)
-                } editCancellationAction: {
-                    context.send(viewAction: .cancelEdit)
-                }
-                .padding()
-            }
+        timeline
+            .safeAreaInset(edge: .bottom) { messageComposer }
             .navigationBarTitleDisplayMode(.inline)
-            .toolbar {
-                ToolbarItem(placement: .navigationBarLeading) {
-                    RoomHeaderView(context: context)
-                }
-            }
+            .toolbar { toolbar }
+            .overlay { loadingIndicator }
             .alert(item: $context.alertInfo) { $0.alert }
             .sheet(item: $context.debugInfo) { DebugScreen(info: $0) }
-
-            if context.viewState.showLoading {
-                ProgressView()
-                    .progressViewStyle(.circular)
-                    .tint(.element.primaryContent)
-                    .padding(16)
-                    .background(Color.element.quinaryContent)
-                    .cornerRadius(8)
-            }
+    }
+
+    var timeline: some View {
+        TimelineTableView()
+            .environmentObject(context)
+            .timelineStyle(settings.timelineStyle)
+            .overlay(alignment: .bottomTrailing) { scrollToBottomButton }
+    }
+
+    var messageComposer: some View {
+        MessageComposer(text: $context.composerText,
+                        focused: $context.composerFocused,
+                        sendingDisabled: context.viewState.sendButtonDisabled,
+                        type: context.viewState.composerMode) {
+            sendMessage()
+        } replyCancellationAction: {
+            context.send(viewAction: .cancelReply)
+        } editCancellationAction: {
+            context.send(viewAction: .cancelEdit)
         }
+        .padding()
     }
 
-    private func sendMessage() {
-        guard !context.viewState.sendButtonDisabled else {
-            return
+    var scrollToBottomButton: some View {
+        Button { context.viewState.scrollToBottomPublisher.send(()) } label: {
+            Image(uiImage: Asset.Images.timelineScrollToBottom.image)
+                .shadow(radius: 2.0)
+                .padding()
         }
-
+        .opacity(context.scrollToBottomButtonVisible ? 1.0 : 0.0)
+        .animation(.elementDefault, value: context.scrollToBottomButtonVisible)
+    }
+
+    @ViewBuilder
+    var loadingIndicator: some View {
+        if context.viewState.showLoading {
+            ProgressView()
+                .progressViewStyle(.circular)
+                .tint(.element.primaryContent)
+                .padding(16)
+                .background(Color.element.quinaryContent)
+                .cornerRadius(8)
+        }
+    }
+
+    var toolbar: some ToolbarContent {
+        ToolbarItem(placement: .navigationBarLeading) {
+            RoomHeaderView(context: context)
+        }
+    }
+
+    private func sendMessage() {
+        guard !context.viewState.sendButtonDisabled else { return }
         context.send(viewAction: .sendMessage)
     }
 }