Creating Placeholder UI with Redacted Modifier in SwiftUI

Redacted Placeholder : SwiftUI comes with a unique and effortless way to create a beautiful placeholder UI while lazy loading your app content.

In this article will learn Redacted Placeholder & Placeholder while loading in Swift UI.

Redacted Placeholder 

All you need to do is add the redacted modifier with the placeholder property.

Text("My Card")
	.redacted(reason: .placeholder)

..

Placeholder while loading 

A good way to show the placeholder UI during your API call is to set a Boolean that sets to true after successful API call.

Text("My Card")
	.redacted(reason: isLoading ? .placeholder : .init())

..

In this sample code, we're applying a placeholder style to a card layout while it's loading. 

In this case, isLoading is set to true by default. After 2 seconds, we set that boolean to false.

struct ContentView: View {
    @State var isLoading = true

    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1)), Color(#colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1))]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()
            CardView()
                .redacted(reason: isLoading ? .placeholder : .init())
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                        isLoading = false
                    }
                }
        }
    }
}

..

Text, images and shapes in CardView will automatically be reduced to basic rounded rectangles.

struct CardView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Image(uiImage: #imageLiteral(resourceName: "avatar"))
                .resizable().aspectRatio(contentMode: .fit)
                .mask(Circle())
                .frame(width: 44, height: 44)
            Text("Designing fluid interfaces")
                .font(.title2).bold()
            Text("By Chan Karunamuni".uppercased())
                .font(.footnote).bold()
                .foregroundColor(.secondary)
            Text("Discover the techniques used to create the fluid gestural interface of iPhone X. Learn how to design with gestures and motion that feel intuitive and natural, making your app a delight to use.")
                .frame(maxWidth: .infinity, alignment: .leading)
                .foregroundColor(.secondary)
            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity, maxHeight: 300)
        .background(Color.white)
        .mask(RoundedRectangle(cornerRadius: 30, style: .continuous))
        .shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 40)
        .padding()
    }
}

..