Async rendering: React

AsyncRender.js

<GridList cellHeight={160} className={classes.gridList} cols={3}>
  {pokemons ? (
    pokemons.map(async ({ pokemon }) => {
      const url = await getPokemon(pokemon.url);
      return (
        <GridListTile key={pokemon.name} cols={1}>
          <img src={url} alt={pokemon.name} />
        </GridListTile>
      );
    })
  ) : (
    <div />
  )}
</GridList>

SuspenseRendering.js

pokemons.map(async ({ pokemon }) => {
  const url = await getPokemon(pokemon.url);
  return (
    <Suspense fallback={<h1>Loading pokemons...</h1>}>
      <GridListTile key={pokemon.name} cols={1}>
        <img src={url} alt={pokemon.name} />
      </GridListTile>
    </Suspense>
  );
})