WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

Showing a loading view within a collection view section?

Forums > iOS

Hi everyone,

So within my collection view (using compositional layout), I have 2 sections... one is static and I have 4 cells in it. This is simple.

The second section I want to dynamically populate with data from a REST API, so the data will potentially change, could take time to load, etc, and therefore I want to show a spinner within the section while I wait for the data to load (if it does at all)... like this example, as seen in Apple’s support app:

https://i.imgur.com/RnQxuwL.jpg

You can see the top section has the spinner, which I want to replicate.

Basically I want to avoid having to show a spinner that covers the entire screen, so that the top section can still be interacted with while the other section loads asynchronously.

Any pointers on how to achieve this?

Thanks!

1      

Look for UIActivityIndicatorView which is the spinner. Are you using SwiftUI? If so

import SwiftUI

struct Spinner: UIViewRepresentable {
    let isAnimating: Bool
    let style: UIActivityIndicatorView.Style
    let color: UIColor

    func makeUIView(context: UIViewRepresentableContext<Spinner>) -> UIActivityIndicatorView {
        let spinner = UIActivityIndicatorView(style: style)
        spinner.hidesWhenStopped = true
        spinner.color = color
        return spinner
    }

    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<Spinner>) {
        isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
    }
}

then you call the view

Spinner(isAnimating: true, style: .large, color: .white)

add .padding or .frame to make the size you want.

or How to use UIActivityIndicatorView to show a spinner when work is happening

2      

You can either create special loading cell that will have just the spinner or have your cell have all content hidden, show just spinner and once you have data update the cell (meaning show all the labels etc. and hide the spinner.)

1      

If you're using SwiftUI have you considered iActivityIndicator? https://iswiftui.com/iActivityIndicator.html

You can create an "isLoading" state variable and simply display an activity indicator while loading.

Example code:

import SwiftUI
import iActivityIndicator

struct ContentView: View {
    @State var isLoading: Bool = false

    var body: some View {
        if (isLoading) {
             iActivityIndicator()
                .style(.arcs())
        }
    }
}

2      

Save 50% in my Black Friday sale.

SAVE 50% To celebrate WWDC22, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.