Lazy-loaded frames are treated as loaded

[ghost]

Suppose you have a menu, loaded in with a frame (src="/menu"), that is initially off screen (with a <details>/<summary> tag pairing, say). By setting loading="lazy" on the frame, we can defer loading until someone opens the menu. Great. But what if you want to focus the first menu item when the menu loads?

We need to wait for the frame to load, because it will load in all our menu items. We have nothing to focus until the frame loads. As frame elements have a loaded promise, the solution seems really easy — a Stimulus controller action something like:

async adjustFocus() {
  await this.frameElement.loaded
  this.focusFirstItem()
}

This won’t work, though. Frame elements are instantiated with the promise resolved. And the only time the promise gets changed to a pending state is when we load the frame src. But because we’re lazy loading, we don’t load the frame src until we open the menu, so when the adjustFocus method above runs, the promise is already resolved. It doesn’t need to await the promise, it just goes on to focusFirstItem. Yet the frame hasn’t loaded, we have no items, so this is going to fail.

You can make this work, with workarounds (I noticed HEY has a hidden <a> tag, pointing to a frame, that gets programatically clicked when you open a menu). But this feels like something that should just work.

[ghost]

I think the solution here is something along the lines of: (1) assign a thenable object to this.element.loaded in FrameController#connect and (2) resolve that "thenable", as a promise, in FrameController#elementAppearedInViewport. But I’m too much of a typescript noob to make it work.

This is a first draft of the implementation I had in mind:

//  src/core/frames/frame_controller.ts

export class FrameController {
  // ...

  connect() {
    if (this.loadingStyle == FrameLoadingStyle.lazy) {
      this.element.loaded = { then: (resolve) => resolve() }
      this.appearanceObserver.start()
    }
    
    // ...
  }
  
  // ...
  
  async elementAppearedInViewport(element: Element) {
    const promise = this.element.loaded
    await this.loadSourceURL()
    await Promise.resolve(promise)
  }
}

[sstephenson]

Agree, you should be able to wait on the loaded promise for a lazy frame.

[mattalat]

I believe this is still an issue. There's also the question of why lazy frames have fulfilled .loaded promises and are .complete == true before they're visible on the screen.

[bellef]

Upvoting as it's still an issue 👍

[tvongaza]

Also up voting, just ran into this bug.

Here is my work around:

async adjustFocus() {
  await new Promise<void>(function (resolve) {
    this.frameElement.addEventListener("turbo:frame-load", function frameLoadedListener() {
      this.frameElement.removeEventListener("turbo:frame-load", frameLoadedListener);
      resolve();
    });
  });
  this.focusFirstItem()
}