How to display ProgressView during an async operation in SwiftUI - asynchronous

Question

Hello!
I want to display progress during my operation. I'm new to swift and swiftui. Please help...
Here is the model with one async method:
class CountriesViewModel : ObservableObject {
#Published var countries: [String] = [String]()
#Published var isFetching: Bool = false
#MainActor
func fetch() async {
countries.removeAll()
isFetching = true
countries.append("Country 1")
Thread.sleep(forTimeInterval: 1)
countries.append("Country 2")
Thread.sleep(forTimeInterval: 1)
countries.append("Country 3")
Thread.sleep(forTimeInterval: 1)
isFetching = false
}
}
and the ContentView:
struct ContentView: View {
#StateObject var countriesVM = CountriesViewModel()
var body: some View {
ZStack {
if (countriesVM.isFetching) {
ProgressView("Fetching...")
}
else {
List {
ForEach(countriesVM.countries, id: \.self) { country in
Text(country)
}
}
.task {
await countriesVM.fetch()
}
.refreshable {
Task {
await countriesVM.fetch()
}
}
}
}
}
}
The progress is not displayed. What am I doing wrong?

Answer 1

you could try this simple approach:
struct ContentView: View {
#StateObject var countriesVM = CountriesViewModel()
var body: some View {
ZStack {
if (countriesVM.isFetching) {
ProgressView("Fetching...")
}
else {
List {
ForEach(countriesVM.countries, id: \.self) { country in
Text(country)
}
}
.refreshable {
Task {
await countriesVM.fetch()
}
}
}
}
.task { // <-- here
await countriesVM.fetch()
}
}
class CountriesViewModel : ObservableObject {
#Published var countries: [String] = [String]()
#Published var isFetching: Bool = true // <-- here
#MainActor
func fetch() async {
countries.removeAll()
isFetching = true
countries.append("Country 1")
Thread.sleep(forTimeInterval: 1)
countries.append("Country 2")
Thread.sleep(forTimeInterval: 1)
countries.append("Country 3")
Thread.sleep(forTimeInterval: 1)
isFetching = false
}
}
}
EDIT-1: including a button to refresh the data.
struct ContentView: View {
#StateObject var countriesVM = CountriesViewModel()
var body: some View {
ZStack {
if countriesVM.isFetching {
ProgressView("Fetching...")
}
else {
VStack {
Button("refresh", action: {
Task { await countriesVM.fetch() }
}).buttonStyle(.bordered)
List {
ForEach(countriesVM.countries, id: \.self) { country in
Text(country)
}
}
.refreshable {
await countriesVM.fetch()
}
}
}
}
.task {
await countriesVM.fetch()
}
}
class CountriesViewModel : ObservableObject {
#Published var countries: [String] = [String]()
#Published var isFetching: Bool = false
#MainActor
func fetch() async {
countries.removeAll()
isFetching = true
// representative background async process
DispatchQueue.global(qos: .background).asyncAfter(deadline: .now() + 2) {
// eventualy, updates on the main thread for the UI to use
DispatchQueue.main.async {
self.countries.append("Country 1")
self.countries.append("Country 2")
self.countries.append("Country 3")
self.isFetching = false
}
}
}
}
}