Screen goes black after segue

Question

I have tried to debug this but to no avail.

Basically when I segue from the first view controller to the second view controller the screen goes black momentarily. The code performs as I want it to but the screen going black is a bit of a pain for me.

Here is the code:

The segue from the first page:

func mapView(_ mapView: MGLMapView, tapOnCalloutFor annotation: MGLAnnotation) {
        self.performSegue(withIdentifier: "goToSecond", sender: self)
    }

second view controller:

override func viewDidLoad() {
    super.viewDidLoad()
    self.loadDataFromFirebase()
}

first function:

  func loadDataFromFirebase() {
           let db = Firestore.firestore()
           db.collection(restaurauntName).getDocuments { (snapshot, err) in
              if let err = err {
                 print("Error getting documents: \(err)")
                 return
              } else {
                 for document in snapshot!.documents {
                    let name = document.get("Name") as! String
                    let description = document.get("Description") as! String
                    self.names.append(name)
                    self.descriptions.append(description)
                 }
                 self.setupImages() //safe to do this here as the firebase data is valid
                 self.collectionView?.reloadData()
              }
           }
        }

this function sets up the page layout

func setupImages(){
        self.pages = [
            Page(imageName: self.imagesOne, headerText: names[0], bodyText: descriptions[0]),

            Page(imageName: self.imagesTwo, headerText: names[1], bodyText: descriptions[1]),

            Page(imageName: self.imagesThree, headerText: names[2], bodyText: descriptions[2]),

            Page(imageName: self.imagesFour, headerText: names[3], bodyText: descriptions[3]),

            Page(imageName: self.imagesFive, headerText: names[4], bodyText: descriptions[4]),
        ]

        self.collectionView?.backgroundColor = .white
        self.collectionView?.register(PageCell.self, forCellWithReuseIdentifier: "cellId")

        self.collectionView?.isPagingEnabled = true
    }

This sets up the page control

lazy var pageControl: UIPageControl = {
    let pc = UIPageControl()
    pc.currentPage = 0
    pc.numberOfPages = 5
    pc.currentPageIndicatorTintColor = .red
    pc.pageIndicatorTintColor = .gray
    return pc
}()

swiping controller extension:

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }

    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        return pages.count

    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! PageCell

        let page = pages[indexPath.item]
        cell.page = page
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width, height: view.frame.height)
    }

Please let me know if I have to add anything else! any help is welcome

here is a youtube clip of the problem:

https://www.youtube.com/watch?v=vQGiw3Jd9pM

I have since found that when I comment out the firebase method the problem goes away.

Answer 1

I have solved the problem! the problem was the order in which the functions were being called.

I realised not that the page was being set up too fast for firebase so I now call the function earlier! in the view will appear

override func viewWillAppear(_ animated: Bool) {
        print("Done")
        super.viewWillAppear(animated)

        self.loadDataFromFirebase()
}

Thanks to all who helped!

Answer 2

it seems your loadDataFromFirebase() method is taking a long time to execute on the main thread causing it to hung. Move your fetch to a background thread and update your UI once the data has been fetched in the meantime display a loading indicator or something of the sorts. Try:

func loadDataFromFirebase() {
    DispatchQueue.global(qos: .userInitiated).async { [weak self] in 
        // Fetch and convert data
        let db = Firestore.firestore()
        ...
        DispatchQueue.main.async {
             // Update your UI components with the data here
             self.setupImages()
             self.collectionView?.reloadData()
        }
    }
}