How to Implement SkeletonView in a UITableViewController Class with Custom Cell - iOS Swift

 

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()

 

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 {

        // return the number of sections in your tableview
        return 3 
    

}

func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        if section == 2 {

 

            // return the number of count of your data array
            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" 

    }
     
}

This is how I got my SkeletonView to work on my UITableViewController with custom cell. I hope it works for you, too! Happy coding!