Loading async data for SwiftUI views

Sometimes we need to invoke an async function for fetching data before presenting a SwiftUI view. Therefore, a common flow is showing a spinner while the data is being fetched and then showing the main view. Moreover, if an error occurs, we show a failure view with a retry button. Let’s dive in how to build such view in a generic way.

As said before, our container view, let’s call it ContentPrepareView (similar naming to Apple’s ContentUnavailableView), has three distinct states: loading, failure, and success (named as “content” in the enum).

	extension ContentPrepareView {
	enum ViewContent {
	case loading
	case content
	case failure(Error)
	}
	}

view raw ViewContent.swift hosted with ❤ by GitHub

We’ll go for a fully generic implementation where each of the view state corresponds to a view builder. This gives as flexibility if in some places we want to use custom loading views or different failure view. But on the other hand, most of the time we just want to use a common loading and failure views, that is why we set default values for loading and failure view builders (see below). In addition to view builders, we need an async throwing task closure which handles the data fetching/preparation. If we put it all together, then the ContentPrepareView becomes this:

	struct ContentPrepareView<Content, Failure, Loading>: View where Content: View, Failure: View, Loading: View {
	@State private var viewContent: ViewContent = .loading

	@ViewBuilder let content: () -> Content
	@ViewBuilder let failure: (Error, @escaping () async -> Void) -> Failure
	@ViewBuilder let loading: () -> Loading
	let task: () async throws -> Void

	init(content: @escaping () -> Content,
	failure: @escaping (Error, @escaping () async -> Void) -> Failure = { FailureView(error: $0, retryTask: $1) },
	loading: @escaping () -> Loading = { ProgressView() },
	task: @escaping () async throws -> Void) {
	self.content = content
	self.failure = failure
	self.loading = loading
	self.task = task
	}

	var body: some View {
	Group {
	switch viewContent {
	case .content:
	content()
	case .failure(let error):
	failure(error, loadTask)
	case .loading:
	loading()
	}
	}
	.onLoad(perform: loadTask)
	}
	// redacted
	}

view raw ContentPrepareView.swift hosted with ❤ by GitHub

Since loading, failure and success views can be any kind of views, then our view needs to be a generic view. The body of the view has a switch-case for creating a view for the current view state. One thing to note here is that the onLoad view modifier is a custom one, and the idea is that it makes sure that the content preparation work only runs once per view life-time (onAppear() or task() can run multiple times). The reasoning is that we want to have an experience where we show the loading spinner only when the view is presented the first time, not when it appears again. The loadTask function is async and has responsibility of running the passed in async task closure and updating the current view state.

	struct ContentPrepareView<Content, Failure, Loading>: View where Content: View, Failure: View, Loading: View {
	// redacted
	@MainActor func loadTask() async {
	do {
	viewContent = .loading
	try await task()
	viewContent = .content
	}
	catch {
	viewContent = .failure(error)
	}
	}
	}

view raw LoadTask.swift hosted with ❤ by GitHub

In this example we used a custom FailureView and it is a small view wrapping Apple’s ContentUnavailableView. It sets a label, description and handles the creation of the retry button.

	struct FailureView: View {
	let error: Error
	let retryTask: () async -> Void

	var body: some View {
	ContentUnavailableView(label: {
	Label("Failed to load", systemImage: "exclamationmark.circle.fill")
	}, description: {
	Text(error.localizedDescription)
	}, actions: {
	Button(action: {
	Task { await retryTask() }
	}, label: {
	Text("Retry")
	})
	})
	}
	}

view raw FailureView.swift hosted with ❤ by GitHub

Here is an example how to use the final ContentPrepareView. For demo purposes, it fails the first load and allows succeeding the second.

	struct ContentView: View {
	// Demo: first load leads to an error
	@State private var showsError = true

	var body: some View {
	ContentPrepareView {
	VStack {
	Image(systemName: "globe")
	.imageScale(.large)
	.foregroundStyle(.tint)
	Text("Hello, world!")
	}
	.padding()
	} task: {
	try await Task.sleep(nanoseconds: 3_000_000_000)
	// Demo: Retrying a task leads to success
	guard showsError else { return }
	showsError = false
	throw LoadingError.example
	}
	}
	}

	enum LoadingError: LocalizedError {
	case example

	var errorDescription: String? {
	"The connection to Internet is unavailable"
	}
	}