javascript - Vue: Render v-for incrementally?

Question

I have a v-for loop that renders a ChessGame component many times. However, the ChessGame component is complex, it takes a long time to load, several hundred milliseconds each, and the loop renders dozens of them. So the site is always stuck for several seconds and shows nothing before it shows all games.

Is there a hint that I can give Vue to rerender after each iteration, so that the page slowly fills with them? Or does the way Vue templating works not support this?

<ul v-for="(game, index) in competitions[selected_competition].games" v-bind:key="game.pgn">
  <div>
    <h4>Game {{ index+1 }}</h4>
    <ChessGame :id="'board_' + index" :ref="'board_' + index" :gameinfo="game" style="width: 400px"></ChessGame>
  </div>
</ul>

Answer 1

Is there a hint that I can give Vue to rerender after each iteration, so that the page slowly fills with them?

As far as I know, there is no such functionality in vue to slowly show your data, although what you can do until your data are ready is to show a skeleton loader.

This is a modern approach and almost every big company uses this technique, to indicate that something is loading until we serve the data.

I recommend you check this from vuetify: https://vuetifyjs.com/en/components/skeleton-loaders/