load a component every half second - vuejs3

Question

In a vuejs app, I have a component that is loaded while waiting for reply from the api.
It contains a simple blurred line (no props or events). I want to load that same component every half second additionnaly, i.e. it starts with one line, half a second later a second line, after another half second the third line and so on.
<TheLoadingLine />
TheLoadingLine contains:
<template>
<div class="flex flex-row justify-between md:mb-4 blur-sm ">
<div class="grow flex flex-col md:flex-row justify-between text-bleulfdm pl-6 pr-4 p-1 mb-1 shadow-md xl:rounded-full shadow-bleutresclair text-sm xl:text-lg">
<div class="flex flex-row w-full">
<span class="basis-12 md:basis-24">2 janv</span>
<span class="md:basis-72 ">intitule</span>
<span class="inline-block">catégorie</span>
</div>
<div>
<div class="flex flex-row justify-between" >
<div></div>
<div class="font-bold lg:font-normal">10€</div>
</div>
</div>
</div>
</div>
</template>
I thought of a function with a setInterval, something like:
let timer = setInterval(load_component_function, 500)
But I have no real clue of what to put in such a function and how to implement that.

Answer 1

It is simple. To show component in Vue you use v-if or v-show so you just need a proper condition.
<TheLoadingLine v-if="counter > 0" />
<TheLoadingLine v-if="counter > 1" />
<TheLoadingLine v-if="counter > 2" />
Just increase a counter by one in a setInterval callback
You can also use a v-for:
<TheLoadingLine v-for="c in counter" :key="c" />