SwiftUI placeholders and SkeletonableView

This blog post is a draft.


If you want me to hurry up and complete it, please email me at  jacobmartinbartlett@gmail.com and I'll bump it up my priority list!



- Talk about placeholders

- Show how to use them, what they look like 

- Show how to use a skeletonable view 

- TODO: Make a SkeletonableView SwiftUI package to complement this blog post, allow it to have single and pull-to-refresh parameters (implemented using protocols) 

public struct SkeletonableView
			: View {
    
    private var data: Model
    private var placeholder: Model
    @State private var timeoutRemaining: Int = 5
    private let content: (Model) -> Content
    private let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    public init(data: Model,
                placeholder: Model,
                @ViewBuilder content: @escaping (Model) -> Content) {
        self.data = data
        self.placeholder = placeholder
        self.content = content
    }

    public var body: some View {
        Group {
            if data.isEmpty == true, timeoutRemaining > 0 {
                content(placeholder)
                    .redacted(reason: .placeholder)
                    .allowsHitTesting(false)

            } else {
                content(data)
            }
        }
        .onReceive(timer) { _ in
            if timeoutRemaining != 0 {
                withAnimation {
                    timeoutRemaining -= 1
                }
            }
        }
    }
}

		
	
I've created a simple Swift package where you can use BonesView in your own projects:

Comments

Popular posts from this blog

You're using print() wrong!