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 ofduration
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 seeopacity
is relying on value ofblinking
and changes accordingly. animation
can be provided here with given duration. I have added hereeaseInOut
animation but you can play with different types of animation here e.geaseIn
,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()
}
Join the Swiftable Community to connect with iOS Engineers.