Activity Indicator for UICollectionView

Question

I have a UICollectionView that reads data from Firebase, and I want some kind of activity indicator while it's reading data.

I want the activity indicator to start running as soon as the UICollectionView tab in the TabBar is hit, and I want it to stop and the view/uicollectionView to load once loading from Firebase is done.

I saw this post:

Show Activity Indicator while data load in collectionView Swift

But I could not understand it fully because I did not know how to integrate my UICollectionView there.

EDIT:

This is my code that reads from Firebase:

self.ref = Database.database().reference()
            let loggedOnUserID = Auth.auth().currentUser?.uid


            if let currentUserID = loggedOnUserID
            {
                // Retrieve the products and listen for changes
                self.databaseHandle = self.ref?.child("Users").child(currentUserID).child("Products").observe(.childAdded, with:
                    { (snapshot) in

                        // Code to execute when new product is added
                        let prodValue = snapshot.value as? NSDictionary
                        let prodName = prodValue?["Name"] as? String ?? ""
                        let prodPrice = prodValue?["Price"] as? Double ?? -1
                        let prodDesc = prodValue?["Description"] as? String ?? ""
                        let prodURLS = prodValue?["MainImage"] as? String
                        let prodAmount = prodValue?["Amount"] as? Int ?? 0
                        let prodID = snapshot.key

                        let prodToAddToView = Product(name: prodName, price: prodPrice, currency: "NIS", description: prodDesc, location: "IL",
                                                      toSell: false, toBuy: false, owner: currentUserID, uniqueID: prodID, amount: prodAmount, mainImageURL: prodURLS)


                        self.products.append(prodToAddToView)
                        DispatchQueue.main.async
                            {
                                self.MyProductsCollection.reloadData()
                        }
                }
                ) // Closes observe function

You don't have to explicitly understand how to integrate activityIndicator with collectionView. You have to understand how do a UI update while doing a background task. — Nitish, Feb 18 '18 at 18:31

Shehata Gamal · Accepted Answer · 2018-02-18T19:23:06.270

0

let activityView = UIActivityIndicatorView(activityIndicatorStyle: .whiteLarge)

// waiy until main view shows 
override func viewDidAppear(_ animated: Bool) {

   super.viewDidAppear(animated)

   // create a hover view that covers all screen with opacity 0.4 to show a waiting action
    let fadeView:UIView = UIView()
    fadeView.frame = self.view.frame
    fadeView.backgroundColor = UIColor.whiteColor()
    fadeView.alpha = 0.4

   // add fade view to main view
    self.view.addSubview(fadeView)
 // add activity to main view
    self.view.addSubview(activityView)
    activityView.hidesWhenStopped = true
    activityView.center = self.view.center
// start animating activity view
    activityView.startAnimating()

  self.ref = Database.database().reference()
            let loggedOnUserID = Auth.auth().currentUser?.uid


            if let currentUserID = loggedOnUserID
            {
                // Retrieve the products and listen for changes
                self.databaseHandle = self.ref?.child("Users").child(currentUserID).child("Products").observeSingleEvent(.value, with:
                    { (snapshot) in

                        // Code to execute when new product is added
                        let prodValue = snapshot.value as? NSDictionary
                        let prodName = prodValue?["Name"] as? String ?? ""
                        let prodPrice = prodValue?["Price"] as? Double ?? -1
                        let prodDesc = prodValue?["Description"] as? String ?? ""
                        let prodURLS = prodValue?["MainImage"] as? String
                        let prodAmount = prodValue?["Amount"] as? Int ?? 0
                        let prodID = snapshot.key

                        let prodToAddToView = Product(name: prodName, price: prodPrice, currency: "NIS", description: prodDesc, location: "IL",
                                                      toSell: false, toBuy: false, owner: currentUserID, uniqueID: prodID, amount: prodAmount, mainImageURL: prodURLS)


                        self.products.append(prodToAddToView)
                        DispatchQueue.main.async
                            {
                                self.MyProductsCollection.reloadData()
                                  // remove the hover view as now we have data
                               fadeView.removeFromSuperview()
                               // stop animating the activity 
                               self.activityView.stopAnimating()
                        }
                }
                ) // Closes observe function

edited Feb 18 '18 at 19:23

answered Feb 18 '18 at 18:30

Shehata Gamal

98,760
8
65
87

I'm not sure what to replace "fetchPosts()" with. – Ofri Feb 18 '18 at 18:32
I added the code, and it seems to be working like before, no activity indication... – Ofri Feb 18 '18 at 18:43
1

@Sh_Khan : DispatchQueue.main.async is outside DispatchQueue.global. Perhaps that is why, activityIndicator is not displaying. – Nitish Feb 18 '18 at 18:48
@Nitish Actually i copied the code from the link to illustrate it to him – Shehata Gamal Feb 18 '18 at 18:58
I Edited my post and added a snippet of code I wrote that I'm using to read from Firebase. – Ofri Feb 18 '18 at 18:58
Ok, that worked, but... It showed the indicator, then 1 product only (out of 5) loaded, then the indicator was gone, then the other 4 products loaded. How can I make sure ALL products load before indicator is gone ? – Ofri Feb 18 '18 at 19:08
your observe is childAdded so for every child added callback will be called – Shehata Gamal Feb 18 '18 at 19:09
I see. How can I fix that ? – Ofri Feb 18 '18 at 19:11
wait , i will edit it now – Shehata Gamal Feb 18 '18 at 19:12
This does not compile: Cannot assign value of type 'Void?' to type 'DatabaseHandle?' (aka 'Optional') – Ofri Feb 18 '18 at 19:21
editttttttt,.......... – Shehata Gamal Feb 18 '18 at 19:23
Can you open chat please ? – Ofri Feb 18 '18 at 19:29
see remove left hand equation "self.databaseHandle = " no need for it as it's a single observe – Shehata Gamal Feb 18 '18 at 19:31
After changing to "observeSIngleEvent", it only loads ONE product (Instead of 5) and even reads data wrong – Ofri Feb 18 '18 at 19:35
Products added dynamically ??? can u show me database structure – Shehata Gamal Feb 18 '18 at 19:40
Yes, products can be added using an "Add product button". What do you mean database structure ? – Ofri Feb 18 '18 at 20:17
you need to read about **.observe** , **observeSingleEvent** also there is a difference between **.value** and **.childAdded** – Shehata Gamal Feb 18 '18 at 20:26

Lamour · Answer 2 · 2018-02-18T18:58:30.767

I mean UIActivityIndicatorView isn't hard to work with, you display it when fetching data, and stop it when done.

private lazy var indicator : UIActivityIndicatorView = { // here we simply declaring the indicator along some properties 
    let _indicator = UIActivityIndicatorView()
    // change the color
    _indicator.color = .black
    // when you call stopAnimation on this indicator, it will hide automatically
    _indicator.hidesWhenStopped = true
    return _indicator
}()

Now where you want to place it? you can either placed it into your parent's view, or into your navigationBar. (I choose to place into the right side of the navigationBar )

self.navigationItem.rightBarButtonItem = UIBarButtonItem.init(customView: indicator)

Now say you have this function that return data (via callbacks) from some apis.

// this callback emits data from a background queue
    func fetchPost(completion:@escaping(Array<Any>?, Error?) -> ()) {
        DispatchQueue.global(qos: .background).async {
           // ... do work 
             completion([], nil) // call your completionHandler based either error or data
        }
    }


/* now let's called that fetchPost function and load data into your 
  collectionView, but before let's started this indicator */


override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.rightBarButtonItem = UIBarButtonItem.init(customView: indicator)
    indicator.startAnimating()

    fetchPost { [weak self] (data, err) in
        // go to the main queue to update our collectionView
        // and stop the indicator
        DispatchQueue.main.async { [weak self] in
            // stop animation
            self?.indicator.startAnimating()
            // do something we have an error
            if let _err = err {}

            if let _data = data {
                // fill array for collectionView
                // reload the collectionView
                self?.collectionView?.reloadData()
            }
        }
    }
}

You should not be starting the activity view in your lazy property. — rmaddy, Feb 18 '18 at 18:50
yeah my mistake @rmaddy, since it would defeat the lazy initializer purpose. — Lamour, Feb 18 '18 at 18:54
Can you please show me the fixed code ? Btw, Look at my edit :) I added the snippet of code I wrote to read from Firebase — Ofri, Feb 18 '18 at 18:57

Activity Indicator for UICollectionView

2 Answers2