SkelentonView is a beautiful loading view to add to your app, especially if you are fetching a large amount of data, i.e., getting data with photos from Firestore. It's easy to implement it with a tableview inside a ViewController class, but implementing SkeletonView in a TableViewController with a custom cell and a .xib file is quite tricky.
I spent a couple of hours trying to figure it out, and there wasn't enough information on how to do it, but I eventually got it working. I think many of you have encountered the same problem, that's why I am sharing my solution here.
I am not going to go through the entire process on how to set up a custom cell. I assume you already know that. If you don't know how to set up a custom cell, please leave a comment below if you want me to make a tutorial on that too.
Before we start, make sure you already installed SkeletonView in your project. If you haven't, please follow the instructions from their Github page.
Add a UITableViewController in the storyboard. In my example, I have three sections, and the 3rd section or technically section 2, because the 1st section is at index 0, is the one that has a custom cell.
In the storyboard, please set all objects in the TableView to 'is Skeletonable = On', i.e, tableview cell, content view, label, button, etc. If you use .xib, set all objects to 'is Skeletonable = On' as well.
In the viewDidLoad, add the following code:
tableView.estimatedRowHeight = 200
// register you cell
tableView.register(UINib(nibName: "YOUR_CELL_NIB_NAME", bundle: nil), forCellReuseIdentifier: "YOUR_CELL_REUSE_IDENTIFIER")
// show SkeletonView animation
self.view.showAnimatedGradientSkeleton()
self.tableView.visibleCells.forEach { $0.showAnimatedGradientSkeleton() }
self.tableView.showAnimatedGradientSkeleton()
// call the function that fetches the data, example:
loadCategories()
// register you cell
tableView.register(UINib(nibName: "YOUR_CELL_NIB_NAME", bundle: nil), forCellReuseIdentifier: "YOUR_CELL_REUSE_IDENTIFIER")
// show SkeletonView animation
self.view.showAnimatedGradientSkeleton()
self.tableView.visibleCells.forEach { $0.showAnimatedGradientSkeleton() }
self.tableView.showAnimatedGradientSkeleton()
// call the function that fetches the data, example:
loadCategories()
In your viewDidAppear, add the following code:
DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
self.tableView.stopSkeletonAnimation()
self.view.hideSkeleton()
}
In your cellForRowAt, add this code to hide the SkeletonView once data is loaded:
cell.hideSkeleton()
Then, conform to SkeletonTableViewDataSource and implement the following methods:
extension YourTableViewController : SkeletonTableViewDataSource {
func numSections(in collectionSkeletonView: UITableView) -> Int {
func numSections(in collectionSkeletonView: UITableView) -> Int {
// return the number of sections in your tableview
return 3
}
func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int {
if section == 2 {
func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int {
if section == 2 {
// return the number of count of your data array
return sparePartsCategoriesArray.count
return sparePartsCategoriesArray.count
}
return super.tableView(skeletonView, numberOfRowsInSection: section)
}
func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
// return the reuse identifier you set for your custom cell
return "YOUR_CELL_REUSE_IDENTIFIER"
return "YOUR_CELL_REUSE_IDENTIFIER"
}
}
This is how I got my SkeletonView to work on my UITableViewController with custom cell. I hope it works for you, too! Happy coding!
