On generator functions for skeleton screens

[JaimeObregon]

The Getting started section from the docs states that a component class can be declared as an asynchronous generator.

The GithubUrls example component provided in the docs implements this pattern, in which the render() method first yields a loading indicator and then the final results asynchronously fetched.

I am curious about the usage of generator functions along with Tonic to display skeleton screens for web components.

Can anyone elaborate further how would such a component be called? Or, better, complete the docs with a working example.

[heapwolf]

Yeah the docs could use some more materials in this area. Roughly (I haven't run this code), you could add your top level component and a it can have a child component with an async-generator renderer like this...

class MyAsyncComponent extends Tonic {
  click () {
    this.reRender()
  }

  async * render () {
    yield this.html`<tonic-loader></tonic-loader>`

    const data = await foobar()

    return this.html`
      <div>${data}</div>
    `
  }
}

class AppContainer extends Tonic {
  render () {
    return this.html`
      <div>
        <my-async-component></my-async-component>
      </div>
    `
  }
}

Tonic.add(MyAsyncComponent)
Tonic.add(AppContainer)

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(new AppContainer())
})

[JaimeObregon]

Thank you, @heapwolf. But the render() method in the MyAsyncComponent class of your example returns, when invoked, a Generator object. To yield anything it has to be called via its next() method. And, to my understanding, that has to be done twice, one before and again after the async operation ends.

Does Tonic do that? If not, how do I know, at runtime, when has foobar() resolved so I can invoke the generator object for the second time?

[heapwolf]

Tonic handles all this stuff for you. That way you don't need to think "what if I want an async or async generator function as my render function". Check out this and this for the icky internal details ;)

[heapwolf]

Also, it's perfectly safe to mix and match nested components with all three types of renderers. It will just work.