Wait

1linkimport { Wait } from 'callbag-jsx';

2link

3linkrenderer.render(

4link  <Wait

5link    for={fetch('https://pokeapi.co/api/v2/pokemon/charizard').then(res => res.json())}

6link    with={() => <>Loading ...</>}

7link    then={pokemon => <h1>{pokemon.name}</h1>}

8link  />

9link).on(document.body);

👉 with property is optional, and will be displayed while fetching data.
👉 for property is usually a promise.
👉 for property can also be a callbag, in which case it will wait for its next emission.

linkConcurrent Rendering

By default, <Wait/> starts creating DOM elements after data is fetched. This process can be sped up by creating DOM elements while data is being fetched, and then updating them accordingly.

Pass concurrently flag to enable concurrent rendering. Note that in concurrent mode, then() will be given a state instead of a plain object.

1linkrenderer.render(

2link  <Wait concurrently

3link    for={fetch('https://pokeapi.co/api/v2/pokemon/charizard').then(res => res.json())}

4link    with={() => <>Loading ...</>}

5link    then={pokemon => <h1>{pokemon.sub('name')}</h1>}

6link  />

7link).on(document.body);