ferryawijayanto
ferryawijayanto

Reputation: 649

load tableView fast

Hi I have a problem with UI in my app, I make a closure UITableView so it will display half of my screen and set a tableView delegate and dataSource in viewDidLoad. but my UI is load very slow, I try to use DispatchQueue in my request but nothing works. and try DispatchQueue.global(qos: .background).async in tableView delegate and datasource, the UI show up and table view being display but there is a warning say tableView delegate and dataSource main run in main thread. But the object load slow too. can anyone suggest what should I do?

this is my code

let tableView: UITableView = {
    let view = UITableView()
    view.backgroundColor = .white
    view.layer.cornerRadius = 20
    return view
}()

this is my function and called in viewDidLoad

fileprivate func setupTableView() {
    DispatchQueue.main.async {
        self.tableView.delegate = self
        self.tableView.dataSource = self
        self.tableView.register(PrayerTimeViewCell.self, forCellReuseIdentifier: self.cellId)
        self.tableView.separatorColor = .clear
        self.tableView.backgroundColor = .clear
        self.tableView.rowHeight = 53
    }
}

this is my request code

DispatchQueue.global(qos: .background).async {
            Alamofire.request(prayerUrl, method: .get, parameters: nil, encoding: URLEncoding.default, headers: nil).responseData(completionHandler: { (dataResponse) in
                if let err = dataResponse.error {
                    print("Failed to fetch data:", err)
                    return
                }

                guard let data = dataResponse.data else { return }

                do {
                    let prayerData = try JSONDecoder().decode(PrayerModel.self, from: data)

                    prayerData.items.forEach({ (item) in
                        let shubuh = Prayer(prayerName: "Shubuh", prayerIcon: #imageLiteral(resourceName: "PartlyCloudyNight"), prayerTime: item.fajr)
                        let dzuhur = Prayer(prayerName: "Dzuhur", prayerIcon: #imageLiteral(resourceName: "Sunny"), prayerTime: item.dhuhr)
                        let ashar = Prayer(prayerName: "Ashar", prayerIcon: #imageLiteral(resourceName: "PartlyCloudyDay"), prayerTime: item.asr)
                        let maghrib = Prayer(prayerName: "Maghrib", prayerIcon: #imageLiteral(resourceName: "Overcast"), prayerTime: item.maghrib)
                        let isya = Prayer(prayerName: "Isya", prayerIcon: #imageLiteral(resourceName: "Clear"), prayerTime: item.isha)
                        self.prayers.append(contentsOf: [shubuh, dzuhur, ashar, maghrib, isya])
                    })
                    DispatchQueue.main.async {
                        self.tableView.reloadData()
                    }
                } catch let decodeErr {
                    print("Failed to decode:", decodeErr)
                }
            })
        }

my tableView

Upvotes: 5

Views: 438

Answers (1)

Robert Dresler
Robert Dresler

Reputation: 11140

It takes some time than you get data from http request, so your table view will be without data until http request isn't completed. In this case I suggest writing code without any DispatchQueue.main.async etc.

Just write this to your viewDidLoad function:

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
    tableView.register(PrayerTimeViewCell.self, forCellReuseIdentifier: cellId)
    tableView.separatorColor = .clear
    tableView.backgroundColor = .clear
    tableView.rowHeight = 53

    getPrayersData() // this is moment when you probably haven't got data yet
}

Now create function for getPrayerData()

func getPrayersData() {
    Alamofire.request(prayerUrl, method: .get).responseJSON { response in

        // this is moment when request is completed

        guard let data = response.data else {
            print("Failed to fetch data:", response.error)
            return 
        }

        do {
            let prayerData = try JSONDecoder().decode(PrayerModel.self, from: data)

            prayerData.items.forEach({ (item) in
                let shubuh = Prayer(prayerName: "Shubuh", prayerIcon: #imageLiteral(resourceName: "PartlyCloudyNight"), prayerTime: item.fajr)
                let dzuhur = Prayer(prayerName: "Dzuhur", prayerIcon: #imageLiteral(resourceName: "Sunny"), prayerTime: item.dhuhr)
                let ashar = Prayer(prayerName: "Ashar", prayerIcon: #imageLiteral(resourceName: "PartlyCloudyDay"), prayerTime: item.asr)
                let maghrib = Prayer(prayerName: "Maghrib", prayerIcon: #imageLiteral(resourceName: "Overcast"), prayerTime: item.maghrib)
                let isya = Prayer(prayerName: "Isya", prayerIcon: #imageLiteral(resourceName: "Clear"), prayerTime: item.isha)
                self.prayers.append(contentsOf: [shubuh, dzuhur, ashar, maghrib, isya])
            })

            self.tableView.reloadData()

        } catch {
            print("Failed to decode: \(error)")
        }
    }
}

Upvotes: 5

Related Questions