We want to create a realistic illustration of how async generators can deal with timing issues in ad rendering.
Here we're considering the example of multiple ad slots for the same provider in a scrolling feed. In our example, a Repository can only initiate an ad fetch to populate the AdSlot component when the AdContainer component comes into view. What we want is an observer to emit a visible
event from the AdContainer that signals the async iterator to emit the next ad index, which we need because the ad fetches are paginated. On the other end of this chain, when the AdSlot is rendered (on the visible AdContainer), we want to emit a viewed
event with the correct ad slot data.
This pattern effectively decouples the UI interaction (scrolling) from the data logic (fetching), creating a clean "pull-based" system from "push-based" UI events.
Here is a complete, runnable Node.js example that simulates this ad-loading flow.