How to Run Task inside Footer When Visible

This is my current view. Instead of a List, I use a LazyVStack wrapped under a ScrollView.

.onAppear does not seem to work here. I assumed it runs when the view is visible on the screen.

My goal is when the footer is visible, it always runs a Task.

What could be wrong?

@State private var cities: [City]?
@State private var index = 0
@State private var showFooter = true

func content(_ cities: [City]) -> some View {
    return GeometryReader { geometryProxy in
      ScrollView {
        LazyVStack(alignment: .leading, spacing: 0) {
          if cities.count > 0 {
            ForEach(cities) { city in
              HStack {
                Text(city.header)
                  .bold()
                  .foregroundColor(.white)
                  .textCase(.uppercase)
                  .padding(.all, 8)
                Spacer()
              }
              .background(Color(UIColor(named: PrefTool.instance.getBoolean(Keyword.DARK_MODE) ? "DarkerGray" : "DarkGray")!))
             
              ForEach(city.businesses) { busines in
                  Text(business.name)
                  Divider()
              }
            }
          }
          else {
            Text("Empty List")
          }
        }
        .safeAreaInset(edge: .bottom, spacing: 0) {
          if showFooter {
            VStack {
              Text("Footer")
            }
            .padding()
            .frame(maxWidth: .infinity)
            // The background will extend automatically to the edge
            .background(Color.green)
            .onAppear {
              Task {
                do {
                  let moreList = try await getMoreCities(index)
                  showFooter = false
                  if !moreList.isEmpty {
                    cities?.append(contentOf: moreList)
                    showFooter = true
                  }
                } catch {
                  showFooter = false
                }
              }
            }
          }
        }
      }
    }
  }

This is used inside body

var body: some View {
   content(cities)
}

Thoughts? What is a good way to show a footer and then run a task when it is visible in the screen.