Reloading UITableView while Animating Scroll in iOS 11

Reloading UITableView while Animating Scroll

Calling reloadData on UITableView may not be the most efficient way to update your cells, but sometimes it’s easier to ensure the data you are storing is in sync with what your UITableView is showing. In iOS 10 reloadData could be called at any time and it would not affect the scrolling UI of UITableView. However, in iOS 11 calling reloadData while your UITableView is animating scrolling causes the UITableView to stop its scroll animation and not complete. We noticed this is only true for scroll animations triggered via one of the UITableView methods (such as scrollToRow(at:at:animated:)) and not for scroll animations caused by user interaction. This can be an issue when server responses trigger a reloadData call since they can happen at any moment, possibly when scroll animation is occurring.

Example of scroll animation getting interrupted by a `reloadData` call

Solution

If you don’t want to switch to updating cells individually, one solution is to defer your reloadData call until all scroll animations are complete. We use a utility class to encapsulate interactions with aUITableView.

class TableViewUtility {

    let tableView: UITableView
    var data: Data?
    
    init(tableView: UITableView) {
        self.tableView = tableView
    }

    func showData(_ data: Data) {
        self.data = data
        tableView.reloadData()
    }

    // Other UITableViewDataSource and UITableViewDelegate methods
}

Now we add:

• A method to animate scrolling (here we use scrolling an index path to the bottom of the UITableView as an example)

func scrollIndexPathToBottom(indexPath: IndexPath) {
   isAnimatingScroll = true
   tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
}

• A variable to keep track of whether or not scroll is being animated

var isAnimatingScroll = false

• A variable to store any Data we need to load once scroll animations have completed

var pendingData: Data?

• Update showData to store Data if scroll animation is occurring when we try to reload the table

func showData(_ data: Data) {
    guard !isAnimatingScroll else {
        pendingData = data
        return
    }

    self.data = data
    tableView.reloadData()
}

Altogether it looks like:

class TableViewUtility {
    ...

    var isAnimatingScroll = false
    var pendingData: Data?

    func scrollIndexPathToBottom(indexPath: IndexPath) {
        isAnimatingScroll = true
        tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }

    func showData(_ data: Data) {
        guard !isAnimatingScroll else {
            pendingData = data
            return
        }

        self.data = data
        tableView.reloadData()
    }
}

Now we need to figure out when scroll animations are finished so we can show any pendingData. Unfortunately the scroll methods that give us scroll animations for UITableView don’t take completion blocks. We found that putting these calls into a CATransaction and setting a completion block didn’t work either, so we used the UIScrollViewDelegate method scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView)

func scrollViewDidEndScrollingAnimation(_ scroll: UIScrollView) {
    isAnimatingScroll = false
    if let pendingData = pendingData {
        showData(pendingData)
        pendingData = nil
    }
}

There is one gotcha with this. If tableView.scrollToRow(at:at:animated:) is called when the given IndexPath is already at the specified position, scrollViewDidEndScrollingAnimation does not get triggered since no scrolling animation occurred. To make sure our isAnimatingScroll flag doesn’t get stuck with a value of true , we have to make sure the IndexPath we’re scrolling to is not already in position:

func scrollIndexPathToBottom(indexPath: IndexPath) {
    let scrollPadding: CGFloat = 1.0
    let indexRect = tableView.rectForRow(at: indexPath)
    let targetScrollYOffset = indexRect.origin.y - tableView.frame.height + indexRect.size.height + tableView.contentInset.bottom

    guard fabs(tableView.contentOffset.y - targetScrollYOffset) > scrollPadding else {
        return
    }    

    isAnimatingScroll = true
    tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }

We use a scrollPadding of 1.0 here to account for small inconsistencies in view placements.

The final thing to watch out for is if you are updating cells individually as well, make sure your pendingData is updated appropriately otherwise you may get stale data being loaded after scroll animations. This means all potential properties of your data should be up to date. For example, if a scroll animation gets triggered and two separate properties of your data get updates, the pendingData should have both of these changes. This may seem obvious, but it can be subtle depending on your app architecture.

The Result

With this, we get smooth scroll animations even when we try to reload the data mid-animation.

If you’ve encountered this problem as well, feel free to leave a comment on how you solved it or if this method was helpful!