Fix up loading progress view

Author: jkmassel

Modules/Sources/Support/UI/Bot Conversations/ConversationListView.swift

@@ -58,6 +58,14 @@ public struct ConversationListView: View {
 
             return .loaded(conversations, nil)
         }
+
+        var isPartiallyLoaded: Bool {
+            guard case .partiallyLoaded = self else {
+                return false
+            }
+
+            return true
+        }
     }
 
     enum ViewSubstate {
@@ -109,11 +117,9 @@ public struct ConversationListView: View {
                 .disabled(!currentUser.permissions.contains(.createChatConversation))
             }
         }
-        .overlay(content: {
-            if case .partiallyLoaded = state {
-                LoadingLatestContentView()
-            }
-        })
+        .overlay {
+            OverlayProgressView(shouldBeVisible: state.isPartiallyLoaded)
+        }
         .task(self.loadConversations)
         .refreshable(action: self.reloadConversations)
     }

Modules/Sources/Support/UI/Bot Conversations/ConversationView.swift

@@ -183,6 +183,14 @@ public struct ConversationView: View {
                 )
             }
         }
+
+        var isPartiallyLoaded: Bool {
+            guard case .partiallyLoaded = self else {
+                return false
+            }
+
+            return true
+        }
     }
 
     enum ViewSubstate: Equatable {
@@ -284,11 +292,9 @@ public struct ConversationView: View {
                 )
             }
         }
-        .overlay(content: {
-            if case .partiallyLoaded = state {
-                LoadingLatestContentView()
-            }
-        })
+        .overlay {
+            OverlayProgressView(shouldBeVisible: state.isPartiallyLoaded)
+        }
         .task(self.loadExistingConversation)
         .refreshable(action: self.reloadConversation)
     }

Modules/Sources/Support/UI/LoadingLatestContentView.swift

@@ -0,0 +1,141 @@
+import SwiftUI
+
+struct OverlayProgressView: View {
+
+    enum ViewState {
+        case mustBeHidden
+        case mustBeVisible
+        case inherit
+    }
+    
+    enum Style {
+        case toast
+        case horizontalBar
+    }
+
+    let shouldBeVisible: Bool
+    private let minimumDisplayTime: Duration
+    private let style: Style
+
+    @State
+    private var state: ViewState = .mustBeHidden // Start off hidden so the view animates in
+
+    private var isVisible: Bool {
+        switch self.state {
+        case .mustBeHidden: false
+        case .mustBeVisible: true
+        case .inherit: shouldBeVisible
+        }
+    }
+
+    init(shouldBeVisible: Bool, minimumDisplayTime: Duration = .seconds(3.8), style: Style = .horizontalBar) {
+        self.shouldBeVisible = shouldBeVisible
+        self.minimumDisplayTime = minimumDisplayTime
+        self.style = style
+    }
+
+    var body: some View {
+        ZStack {
+            switch style {
+            case .toast:
+                toastView
+            case .horizontalBar:
+                horizontalBarView
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: style == .toast ? .top : .bottom)
+        .padding(.top, style == .toast ? 24 : 0)
+        .padding(.bottom, style == .horizontalBar ? 0 : 0)
+        .onAppear {
+            withAnimation(.easeOut) {
+                self.state = .mustBeVisible
+            }
+        }
+        .task {
+            try? await Task.sleep(for: self.minimumDisplayTime)
+            await MainActor.run {
+                withAnimation(.easeOut) {
+                    self.state = .inherit
+                }
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var toastView: some View {
+        // The toast container
+        HStack(spacing: 12) {
+            ProgressView()
+                .progressViewStyle(.circular)
+
+            Text("Loading latest content")
+                .font(.callout)
+                .foregroundStyle(.primary)
+        }
+        .padding(.horizontal, 16)
+        .padding(.vertical, 12)
+        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 14, style: .continuous))
+        .overlay(
+            RoundedRectangle(cornerRadius: 14, style: .continuous)
+                .strokeBorder(.secondary.opacity(0.15))
+        )
+        .shadow(color: .black.opacity(0.15), radius: 10, x: 0, y: 4)
+        .opacity(isVisible ? 1 : 0)
+        .offset(y: isVisible ? 0 : -12)
+        .accessibilityElement(children: .combine)
+        .accessibilityLabel("Loading latest content")
+        .accessibilityAddTraits(.isStaticText)
+    }
+
+    @ViewBuilder
+    private var horizontalBarView: some View {
+        VStack(spacing: 0) {
+            Rectangle()
+                .fill(Color.accentColor)
+                .frame(height: 4)
+                .frame(maxWidth: .infinity)
+                .opacity(isVisible ? 1 : 0)
+                .scaleEffect(x: isVisible ? 1 : 0, y: 1, anchor: .leading)
+                .overlay(
+                    Rectangle()
+                        .fill(Color.accentColor.opacity(0.7))
+                        .scaleEffect(x: 0.3, y: 1)
+                        .offset(x: isVisible ? UIScreen.main.bounds.width : -100)
+                        .animation(
+                            isVisible ? .easeInOut(duration: 1.2).repeatForever(autoreverses: false) : .default,
+                            value: isVisible
+                        )
+                )
+                .accessibilityLabel("Loading")
+                .accessibilityAddTraits(.updatesFrequently)
+        }
+    }
+}
+
+#Preview("Toast Style") {
+    NavigationStack {
+        List {
+            ForEach(0..<12) { i in
+                Text("Row \(i)")
+            }
+        }
+        .navigationTitle("Demo")
+    }
+    .overlay(alignment: .top) {
+        OverlayProgressView(shouldBeVisible: true, style: .toast)
+    }
+}
+
+#Preview("Horizontal Bar Style") {
+    NavigationStack {
+        List {
+            ForEach(0..<12) { i in
+                Text("Row \(i)")
+            }
+        }
+        .navigationTitle("Demo")
+    }
+    .overlay(alignment: .bottom) {
+        OverlayProgressView(shouldBeVisible: true, style: .horizontalBar)
+    }
+}

Modules/Sources/Support/UI/OverlayProgressView.swift

@@ -2,11 +2,34 @@ import SwiftUI
 
 public struct SupportConversationListView: View {
 
-    enum ViewState {
+    enum ViewState: Equatable {
         case loading
         case partiallyLoaded([ConversationSummary])
         case loaded([ConversationSummary])
         case error(Error)
+
+        static func == (lhs: ViewState, rhs: ViewState) -> Bool {
+            switch (lhs, rhs) {
+            case (.loading, .loading):
+                return true
+            case (.partiallyLoaded(let lhsConversations), .partiallyLoaded(let rhsConversations)):
+                return lhsConversations == rhsConversations
+            case (.loaded(let lhsConversations), .loaded(let rhsConversations)):
+                return lhsConversations == rhsConversations
+            case (.error, .error):
+                return true
+            default:
+                return false
+            }
+        }
+
+        var isPartiallyLoaded: Bool {
+            guard case .partiallyLoaded = self else {
+                return false
+            }
+
+            return true
+        }
     }
 
     @EnvironmentObject
@@ -55,11 +78,9 @@ public struct SupportConversationListView: View {
                 SupportForm(supportIdentity: self.currentUser)
             }.environmentObject(self.dataProvider) // Required until SwiftUI owns the nav controller
         })
-        .overlay(content: {
-            if case .partiallyLoaded = state {
-                LoadingLatestContentView()
-            }
-        })
+        .overlay {
+            OverlayProgressView(shouldBeVisible: self.state.isPartiallyLoaded)
+        }
         .task(self.loadConversations)
         .refreshable(action: self.reloadConversations)
     }

Modules/Sources/Support/UI/Support Conversations/SupportConversationListView.swift

@@ -7,6 +7,14 @@ public struct SupportConversationView: View {
         case partiallyLoaded(Conversation)
         case loaded(Conversation)
         case error(Error)
+
+        var isPartiallyLoaded: Bool {
+            guard case .partiallyLoaded = self else {
+                return false
+            }
+
+            return true
+        }
     }
 
     @EnvironmentObject
@@ -49,8 +57,10 @@ public struct SupportConversationView: View {
             switch self.state {
             case .loading:
                 ProgressView(Localization.loadingMessages)
-            case .partiallyLoaded(let conversation): self.conversationView(conversation)
-            case .loaded(let conversation): self.conversationView(conversation)
+            case .partiallyLoaded(let conversation):
+                self.conversationView(conversation)
+            case .loaded(let conversation):
+                self.conversationView(conversation)
             case .error(let error):
                 ErrorView(
                     title: Localization.unableToDisplayConversation,
@@ -70,11 +80,9 @@ public struct SupportConversationView: View {
                 .disabled(!canReply)
             }
         }
-        .overlay(content: {
-            if case .partiallyLoaded = state {
-                LoadingLatestContentView()
-            }
-        })
+        .overlay {
+            OverlayProgressView(shouldBeVisible: self.state.isPartiallyLoaded)
+        }
         .sheet(isPresented: $isReplying) {
             if case .loaded(let conversation) = state {
                 NavigationStack {