How to integrate Shimmer Effect to your app

Last updated: 7 months ago

Shimmer Effect is an unobtrusive loading indicator created by Facebook for its Home screen. While an app loads data asynchronously, it shows a skeleton layout with a shimmering effect until it renders the actual content.

These days this effect is gaining popularity as it makes the view transitions smoother. We often see similar kinds of activity indicators among many applications such as Instagram, Youtube, or Google Maps. Also, there are several open-sourced projects on Github in addition to the original framework Shimmer by Facebook. However, I think the best way to implement the effect still depends on each app. In our team, while referring to the existing frameworks, we decided to design our shimmer effect from scratch suited for the architecture of our application. So in this talk, I would like to share our experience and knowledge with the iOS community.

There are several factors considered when we designed the API.First of all, the effect shouldn't have any side effects on the current UIs. Secondly, we designed the API as simple as possible so that the teammates can develop skeleton views easily and quickly. Lastly, the effect should be elegant. In this talk, I will explain these factors in deep.

Also, I will cover from the basics to create the shimmer effect using Core Animation to very niche Core Animation API that you would seldom use for your daily development. So I hope you will be able to find some of the hidden gems in UIKit by this talk.