Merge pull request #18 from rock-n-code/improvements/browse-pull-to-refresh

Improvement: Pull to refresh in the Browse view

Modules/Sources/Browse/UI/Components/LoadingView.swift

@@ -10,18 +10,28 @@ import SwiftUI
 
 struct LoadingView: View {
     var body: some View {
-        VStack(spacing: 24) {
-            ProgressView()
-                .controlSize(.large)
-                .tint(.red)
+        VStack {
+            Spacer()
             
-            Text(
-                "loading.loading_data.text",
-                bundle: .module
-            )
-            .font(.body)
-            .fontWeight(.semibold)
+            VStack(spacing: 24) {
+                ProgressView()
+                    .controlSize(.large)
+                    .tint(.red)
+                
+                Text(
+                    "loading.loading_data.text",
+                    bundle: .module
+                )
+                .font(.body)
+                .fontWeight(.semibold)
+            }
+            .padding(24)
+            .background(Material.ultraThin)
+            .cornerRadius(16)
+            
+            Spacer()
         }
+        .background(Color.clear)
         .ignoresSafeArea()
     }
 }

Modules/Sources/Browse/UI/Views/BrowseView.swift

@@ -61,6 +61,11 @@ public struct BrowseView: View {
                     showProfile: showProfile
                 )
             }
+            .overlay {
+                if status == .loading {
+                    LoadingView()
+                }
+            }
             .sheet(item: $showSheet) { sheet in
                 switch sheet {
                 case let .upload(id):
@@ -80,16 +85,12 @@ public struct BrowseView: View {
                 isPresenting: $showCreateFolder,
                 id: folder.id
             ) {
-                Task {
-                    await loadItems()
-                }
+                Task { await loadItems() }
             }
             .delete(item: $itemToDelete) {
-                Task {
-                    await loadItems()
-                }
+                Task { await loadItems() }
             }
-            .task(id: folder) {
+            .task  {
                 await loadItems()
             }
     }
@@ -110,9 +111,8 @@ private extension BrowseView {
             )
         case .notSupported:
             EmptyView()
-        case .loading:
-            LoadingView()
-        case .loaded:
+        case .loading,
+             .loaded:
             List(items, id: \.id) { item in
                 switch item {
                 case is Folder:
@@ -124,6 +124,9 @@ private extension BrowseView {
                 }
             }
             .listStyle(.inset)
+            .refreshable {
+                Task { await loadItems() }
+            }
         case .empty:
             MessageView(
                 type: .empty,
@@ -133,9 +136,7 @@ private extension BrowseView {
             )
         case .error:
             MessageView(type: .error) {
-                Task {
-                    await loadItems()
-                }
+                Task { await loadItems() }
             }
         }
     }
@@ -212,6 +213,9 @@ private extension BrowseView {
                 password: account.password
             )
             
+            // Added some throttle (1 second) not to hide the loading indicator right away.
+            try await Task.sleep(nanoseconds: .Constants.secondInNanoseconds)
+            
             if loadedItems.isEmpty {
                 status = .empty
             } else {
@@ -235,13 +239,21 @@ private extension BrowseView {
     }
 }
 
+// MARK: - UInt64+Constants
+
+private extension UInt64 {
+    enum Constants {
+        static let secondInNanoseconds = UInt64(1 * Double(NSEC_PER_SEC))
+    }
+}
+
 // MARK: - Previews
 
 struct BrowseView_Previews: PreviewProvider {
     static var previews: some View {
         NavigationView {
             BrowseView(folder: .init(
-                id: UUID().uuidString,
+                id: "1234567890",
                 name: "Some folder name"
             )) {
                 // show profile closure.