Show progress view while loading countries and No countries found text when user search doesn't match countries list.

Author: percy-g2

iosApp/iosApp/ContentView.swift

@@ -52,27 +52,43 @@ struct CountryListView: View {
     @State var query: String = ""
 
     var body: some View {
-        NavigationView {
-            List {
-                ForEach(viewModel.countryList.filter { query.isEmpty ||  $0.name.contains(query)}, id: \.self) { country in
-                    NavigationLink(destination: CountryInfoDetailedViewShared(country: country)) {
-                        HStack {
-                            Text(country.name).font(.headline)
+            NavigationView {
+                ZStack {
+                    List {
+                        ForEach(viewModel.countryList.filter { query.isEmpty || $0.name.contains(query) }, id: \.self) { country in
+                            NavigationLink(destination: CountryInfoDetailedViewShared(country: country)) {
+                                HStack {
+                                    Text(country.name).font(.headline)
+                                }
+                            }
                         }
                     }
+                    .searchable(text: $query)
+
+                    // Conditional display of the ProgressView
+                    if let isLoading = viewModel.isLoadingCountries.value_ as? Bool, isLoading {
+                        ProgressView()
+                            .progressViewStyle(CircularProgressViewStyle())
+                            .scaleEffect(1.5)
+                            .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    } else if viewModel.countryList.filter({ query.isEmpty || $0.name.contains(query) }).isEmpty {
+                        // Conditional display of text when query result is empty from search bar
+                        Text("No Countries Found!")
+                            .font(.headline)
+                            .foregroundColor(.gray)
+                            .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    }
                 }
-            }
-            .searchable(text: $query)
-            .navigationBarTitleDisplayMode(.inline)
-            .toolbar {
-                ToolbarItem(placement: .principal) {
-                    VStack {
-                        Text("ClimateTrace").font(.headline)
+                .navigationBarTitleDisplayMode(.inline)
+                .toolbar {
+                    ToolbarItem(placement: .principal) {
+                        VStack {
+                            Text("ClimateTrace").font(.headline)
+                        }
                     }
                 }
             }
         }
-    }
 }