Easy to Implement Shimmer Effects in SwiftUI

Nobody like to see loading indicator or blank screen when data is being loaded or user has slow internet connection . To provide a better UX to user there is a nice solution….that’s showSkeletons for that duration.

What is Skeletons?

Skeletons are the placeholder that are shown during the time when real data is being fetched. It just provide a glance of how our view will look like when loading and rendering of data is completed. This gives the impression😎 that user will be able to see the fully loaded view soon.

Add Skeletons:

We can easily achieve basic skeleton animation by adding a ViewModifier .

Below a new BlinkViewModifier is added to have blinking animation for the views. Lets try to understand what exactly this view modifier is doing.

• For BlinkViewModifier value of duration will be provided by the view for which this blink animation needs to be added.
• blinking is a value on change of which animation will start. From iOS 15 onwards value must be provided for the animation.
• to add a blinking animation we need to play with opacity of view. As you can see opacity is relying on value of blinking and changes accordingly.
• animation can be provided here with given duration. I have added here easeInOut animation but you can play with different types of animation here e.g easeIn , easeOut , linear .

Below is the code to show how this blinking animations can be used for any view. I have added one SkeletonCellView which is as per my view requirement. ContentView is used to demonstrate usage of any skeleton view. You just need to add blinking view modifier with duration which you prefer for animation.

struct ContentView: View {
    var body: some View {
        VStack(spacing: 50) {
            SkeletonCellView()
            SkeletonCellView()
            SkeletonCellView()
            SkeletonCellView()
        }
        .blinking(duration: 0.75)
        .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))
    }
}

struct SkeletonCellView: View {
    let primaryColor = Color(.init(gray: 0.9, alpha: 1.0))
    let secondaryColor  = Color(.init(gray: 0.8, alpha: 1.0))
    
    var body: some View {
        HStack(alignment: .top, spacing: 16) {
            secondaryColor
                .frame(width: 116, height: 116)

            VStack(alignment: .leading, spacing: 6) {
                secondaryColor
                    .frame(height: 20)
                
                primaryColor
                    .frame(height: 20)
                
                primaryColor
                    .frame(width: 94, height: 15)
            }
        }
    }
}

#Preview {
    ContentView()
}

Skeletons

Join the Swiftable Community to connect with iOS Engineers.