UIView animation in UITableView doesn't work after reload data

Question

I am facing a strange bug in my app right now. I have an extension for UIView that rotates an indicator 90 degrees to the left and right. I am using an UITableViewController as a navigation drawer. I also added an expandable list and use an UITableViewHeaderFooterView for the main areas (which have subitems).

The UITableViewHeaderFooterView are like the main 'cells'. And below them are real cells of the UITableView that are deleted and inserted when the user taps the UITableViewHeaderFooterView.

Depending on the URL the WebView (main view) has, I want to update the content of the tableView. As soon as the data changes the animation of the extension no longer works. The code still gets executed and the values are correct. I just don't see the animation anymore.

The UITableViewHeaderFooterView:

import UIKit

class TableSectionHeader: UITableViewHeaderFooterView {
    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var indicatorImage: UIImageView!

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        indicatorImage.image = IconFont.image(fromIcon: .next, size: Constants.Sizes.MENU_INDICATOR_SIZE, color: Constants.Colors.WHITE_COLOR)
    }

    func setExpanded(expanded: Bool) {
        indicatorImage.rotate(expanded ? .pi / 2 : 0.0)
    }
}

The method inside the WebViewController:

private func loadNewMenu(href: String) {
    NetworkService.sharedInstance.getNavigation(path: href, completion: { menu in
        if let menuController = self.menuVC {
            menuController.menuItems = menu
            menuController.tableView.reloadData()
        }
    })
 }

The UIView extension:

import UIKit

extension UIView {

    func rotate(_ toValue: CGFloat, duration: CFTimeInterval = 0.2) {
        let animation = CABasicAnimation(keyPath: "transform.rotation")

        animation.toValue = toValue
        animation.duration = duration
        animation.isRemovedOnCompletion = false
        animation.fillMode = kCAFillModeForwards

        self.layer.add(animation, forKey: "rotationIndicator")
    }

}

The relevant methods for the MenuTableViewController:

// MARK: Custom Menu Methods

@objc func handleExpandClose(sender: UITapGestureRecognizer) {        
    guard let section = sender.view?.tag else {
        return
    }

    var indexPaths = [IndexPath]()

    for row in subItems.indices {
        let indexPath = IndexPath(row: row, section: section)
        indexPaths.append(indexPath)
    }

    let isExpanded = menuItems[section].isExpanded
    menuItems[section].isExpanded = !isExpanded
    sectionHeaders[section].setExpanded(expanded: !isExpanded)

    if isExpanded {
        tableView.deleteRows(at: indexPaths, with: .fade)
    } else {
        tableView.beginUpdates()
        closeOpenedSections(section: section)
        tableView.insertRows(at: indexPaths, with: .fade)
        tableView.endUpdates()
    }
}

private func closeOpenedSections(section: Int) {
    var closeIndexPaths = [IndexPath]()

    for (sectionIndex, sec) in menuItems.enumerated() {
        guard let subItems = sec.subItems, sec.isExpanded, sectionIndex != section else {
            continue
        }

        sec.isExpanded = false
        for rowIndex in subItems.indices {
            let closeIndexPath = IndexPath(row: rowIndex, section: sectionIndex)
            closeIndexPaths.append(closeIndexPath)
        }

        sectionHeaders[sectionIndex].setExpanded(expanded: false)

        tableView.deleteRows(at: closeIndexPaths, with: .fade)
    }
}

That's the implementation of the viewForHeaderInSection in my MenuTableViewController:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    if let sectionHeader = self.tableView.dequeueReusableHeaderFooterView(withIdentifier: "TableSectionHeader") as? TableSectionHeader {
        sectionHeader.setUpHeader(emphasize: menuItems[section].emphasize)
        sectionHeader.titleLabel.text = menuItems[section].title

        let tap = UITapGestureRecognizer(target: self, action: #selector(MenuTableViewController.handleExpandClose(sender:)))
        sectionHeader.addGestureRecognizer(tap)

        sectionHeader.indicatorImage.isHidden = menuItems[section].subItems != nil ? false : true
        sectionHeader.tag = section
        self.sectionHeaders.append(sectionHeader)

        return sectionHeader
    }

    return UIView()
}

I know it's a lot of code, but I guess it's somehow related to the reloadData() of the tableView. The animation works perfectly fine before I perform the reload. If I have not opened the menu before it gets reloaded I also don't see the bug. It just happens after the first reload of the data (even if the data is exactly the same).

Again, the animation code still gets executed and the expanded value is the correct one (true/false). I've printed the UIImageView on which the animation takes place to the console and it seems to be the identical view even after the reload. But the animation doesn't appear.

Answer 1

It turned out to be a mistake by myself! I was using two arrays (sectionHeaders, menuItems). I only changed one of them when I received new data. Therefore, there was a mismatch between the cells and the content I was working on.