Loading data is an essential task in any app that communicates with a server or performs intensive computations. While the data is loading, it's a good practice to show a loading indicator or an animated view to provide feedback to the user and prevent them from getting frustrated. In this blog post, we will explore how to create an animating view in SwiftUI while loading data.
The code in this post is available here.
If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios
Step 1: Create a View Model
The first step is to create a view model that will be responsible for loading the data. The view model should have a method that starts loading the data and sets a property to indicate whether the data is being loaded or not.
class ViewModel: ObservableObject {
@Published var isLoading = false
var data: [String] = []
func loadData() {
isLoading = true
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
self.data = ["Data 1", "Data 2", "Data 3"]
self.isLoading = false
}
}
}
In this example, we use the @Published property wrapper to publish the isLoading property and allow it to be observed by the view. The loadData method simulates loading data with a delay of 2 seconds and updates the data property and the isLoading property accordingly.
Step 2: Create an Animating View
The next step is to create an animating view that will be displayed while the data is being loaded. In this example, we will create a simple spinner view that rotates continuously.
struct SpinnerView: View {
@State private var isAnimating = false
var body: some View {
VStack {
Circle()
.trim(from: 0, to: 0.7)
.stroke(Color.blue, lineWidth: 4)
.frame(width: 50, height: 50)
.rotationEffect(Angle(degrees: isAnimating ? 360 : 0))
.animation(Animation.linear(duration: 3).repeatForever(autoreverses: false), value: UUID())
.onAppear {
self.isAnimating = true
}
}
}
}
In this example, we use the Circle shape to create the spinner and the rotationEffect modifier to rotate it continuously. We also use the animation modifier to animate the rotation and the onAppear modifier to start the animation when the view appears.
Step 3: Create the Main View
The final step is to create the main view that will display the animating view while the data is being loaded. In this example, we will use the if statement to conditionally display the spinner view or the loaded data based on the value of the isLoading property.
struct ContentView: View {
@StateObject var viewModel = ViewModel()
var body: some View {
VStack {
if viewModel.isLoading {
SpinnerView()
} else {
List(viewModel.data, id: \.self) { item in
Text(item)
}
}
}
.onAppear {
viewModel.loadData()
}
}
}
In this example, we use the if statement to conditionally display the SpinnerView or the loaded data in a List view. We also use the onAppear modifier to start loading the data when the view appears.
Conclusion
Creating an animating view in SwiftUI while loading data is a simple yet effective way to provide feedback to the user and prevent them from getting frustrated. By following the steps outlined in this blog post, you can easily create an animating view that fits your app’s design and style. It's worth noting that there are many different ways to create animating views in SwiftUI, and this is just one example.
In summary, creating an animating view in SwiftUI while loading data involves creating a view model that loads the data and sets a property to indicate whether the data is being loaded or not, creating an animating view that is displayed while the data is being loaded, and creating the main view that conditionally displays the animating view or the loaded data based on the value of the isLoading property. By following these steps, you can create a great user experience that makes your app feel responsive and engaging.
And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email. If you like my posts, 😚consider tipping me at buymeacoffee.com/xavierios
I’ll see you in the next post!
