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!

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

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.)

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())
        }
    }
}