SkeletonView animation in UITableView

Hello Developers, we are coming with a new story

As we had seen many times some of the great websites and mobile apps using gradient animation until fetching data from the server and populate on the list.

We can also implement this type of animation in UICollectionView or UITableView controls to make it look like awesome ever.

Why we are putting this animation?

The benefit behind this type of animation is we don’t have to block the user interface while fetching the data from the server by putting a loader or something. like we know too much loader and UI block irritates the user. But this type of animation keep users fill live with apps :)

How can I Integrate into my code?

Can we start?

Easy Easy, Now we are going to integrate into our list, First of all, visit this awesome Skeleton Library and integrate into your Xcode project using Pod or Carthage. or you can simply put it.

Pod:

pod "SkeletonView"

Carthage:

github "Juanpe/SkeletonView"

After installing the dependency, You can find isSkeletonable attribute in your Storyboard/Xib Attribute inspector.

If you want to show animation in your control like (UILabel, UIButton, UIView, etc…) just set it to On.

Setup in UITableViewCell :

I hope you understand till now and set isSkeletonable to On mode. Now follow the below procedure to display animation in UITableView.

In your UITablViewCell class put below code in awakeFromNib() to start the animation.

Start animation in controls

But if you have too many controls in Cell you can use the below shortcut to apply the animation.

Short way to group operation.
Ohh I Love this dude.

And also add a method to hide Skeleton when data is available after a Server request. put below method in UITableViewCell class awakeFromNib().

Hide animation on control

Now we move to controller and populate data in UITableView. We have one User model for data. which contains a name, mention name, description, and image.

User model

Create an array of Users in ViewController which is used as Datasource of TableView.

The data source for UITableView

Here we are implementing UITableViewDataSource methods, to display animation and data in cells.

In the numberOfRowsInSection method there are line return users?.count ?? 10 this indicates that if users array is null (it means till now users data is not available) then it displays default animation cell otherwise it returns array count.

In the cellForRowAt method first, we check if users array is nil then we simply continue with animation otherwise if users array is not nil then we first hide the animation then populate the data.

Below is the one example which I used in my current project, You can see this beautiful animation.

Keep in mind that this is just a basic Core animation library. In order to achieve great UX, you’ll explore the library and do your own custom animation.

Leave any comment or do more & more & more clapping :)

--

--

--

iOS | Swift | Flutter | SwiftUI, Let’s grow together | LinkedIn — https://www.linkedin.com/in/jaydeep-vora | Skype — jaydeep.33

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building reusable content loading view with SwiftUI and Combine

All about iOS Development: languages, tools, and utilities — Joy Dev Blog

Importing SwiftUI inside UIKit Based Project in Swift

Builder Pattern In Swift

ECOChain Wallet Now Available on App Store!

Capture Memory Leak with XCTest

Memory Leak object graph

How to Become an iOS Developer

SwiftUI — Exploiting Xcode 11 Canvas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jaydeep Vora

Jaydeep Vora

iOS | Swift | Flutter | SwiftUI, Let’s grow together | LinkedIn — https://www.linkedin.com/in/jaydeep-vora | Skype — jaydeep.33

More from Medium

Preventing Index out of Range with Safe in Swift

Stretchy Header Collection View with images slider

Modern Concurrency in Swift

iOS: Disable “pasted from” banner

AmPdnC