Make a placeholder content in SwiftUI with Redacted & Unredacted

import SwiftUI struct PlaceholderView: View { var body: some View { VStack(spacing: 20) { RoundedRectangle(cornerRadius: 10) .foregroundColor(.gray) .frame(height: 200) .redacted(reason: .placeholder) Text("Title") .font(.title) .redacted(reason: .placeholder) Text("Description") .font(.body) .multilineTextAlignment(.center) .redacted(reason: .placeholder) } .padding() }
} struct ContentView: View { @State var isLoading = true var body: some View { if isLoading { PlaceholderView() .redacted(reason: .placeholder) } else { VStack(spacing: 20) { Image(systemName: "person.crop.circle.fill") .resizable() .frame(width: 100, height: 100) Text("Hieu X. Leu") .font(.title) Text("Software Developer") .font(.body) .multilineTextAlignment(.center) } .padding() } Button(action: { isLoading.toggle() }, label: { Text(isLoading ? "Show content" : "Hide content") }) }
}

In this example, I creating a PlaceholderView that contains a gray rectangle as a placeholder for an image, a title, and a description. I using the .redacted(reason:) modifier on each of these views to redact the content and display a placeholder instead.

I also using a @State property called isLoading to toggle between the redacted and unredacted views. When isLoading is true, I show the PlaceholderView with the .redacted(reason:) modifier. When isLoading is false, I show the unredacted content.

To switch between the redacted and unredacted views, I using a Button with an action that toggles the isLoading state.

This is useful if you want to display a placeholder while data is being loaded, and then switch to the actual content once it’s available.