isLoading Flickering

[mhayes853]

#125 Introduced the yieldLoading API for SharedKeys to yield a new loading state to the underlying reference of @Shared through SharedSubsciber. Currently, when new data is yielded from through SharedSubscriber, the loading state is reset back to its original state. When SharedKeys need to make long-running network calls within subscribe this works fine. However, if the SharedKey needs to stream chunks of data (such as streaming the text from an LLM), this can cause flickering in the UI around any elements that depend on the isLoading property of an @Shared.

For instance, this mock SharedKey will stream chunks of text at a very fast rate, and we want to disable the reload button whilst the chunks are being streamed. However, since every call to yield on SharedSubscriber resets the loading state, there's a chance that the "Reload" button in the UI will flicker as shown in the video.

import SwiftUI
import Sharing

struct TextStreamKey: SharedReaderKey, Hashable {
  typealias Value = String
  
  func load(context: LoadContext<Value>, continuation: LoadContinuation<Value>) {
    // Do some loading...
    continuation.resumeReturningInitialValue()
  }
  
  func subscribe(
    context: LoadContext<String>,
    subscriber: SharedSubscriber<String>
  ) -> SharedSubscription {
    Task {
      for i in 0..<2000 {
        subscriber.yieldLoading()
        subscriber.yield(String(repeating: "text ", count: i))
        try await Task.sleep(for: .milliseconds(7)) // Simulate Slight Delay
      }
    }
    return SharedSubscription {}
  }
}

struct ContentView: View {
  @SharedReader(TextStreamKey()) var text = ""
  
  var body: some View {
    VStack {
      Text(self.text)
      Spacer()
      Button("Reload") {
        Task { try await self.$text.load() }
      }
      .disabled(self.$text.isLoading)
    }
    .padding()
  }
}

Screen.Recording.2025-04-22.at.10.09.02.PM.mov

To best solve this, I think there should be an API to yield data to SharedSubscriber without resetting the loading state. Possibly something like:

func subscribe(
  context: LoadContext<String>,
  subscriber: SharedSubscriber<String>
) -> SharedSubscription {
  Task {
    subscriber.yieldLoading()
    for i in 0..<2000 {
      // 🔵 Either this
      subscriber.yield(String(repeating: "text ", count: i), resetLoading: false)

      // 🟣 Or this
      subscriber.yieldTemporarily(String(repeating: "text ", count: i))

      try await Task.sleep(for: .milliseconds(7)) // Simulate Slight Delay
    }
    subscriber.yieldLoading(false)
  }
  return SharedSubscription {}
}

What do you think?