Skeleton loader not showing when useFetch status is pending

I’m trying to implement an image gallery with a skeleton loader that should display while the images are loading. However, for some reason, the loader is not showing up even with throttling on. I understand that I should use the onload event to check if the images are loaded, but I want to verify that the skeleton loader works while the data is being fetched. If I set the condition to v-if="status !== 'pending'", I can see the skeleton. I tried adding a delay await new Promise((r) => setTimeout(r, 1000)); before imgList.value = data.value.data;, but I still couldn’t see the loader. Also, tried using <Suspense> to use a skeleton as a fallback, but it didn’t work.

Reproduction: https://stackblitz.com/edit/nuxt-starter-63w6mv?file=app%2Fpages%2Fgallery.vue

Template:

<div class="w-32 h-32 bg-white" v-if="status === 'pending'" />
<img
  class="w-full cursor-pointer rounded-lg object-cover shadow-2xl"
  crossorigin="anonymous"
  :src="item.url"
  v-else
/>

Script:

const imgList = ref<Image[]>([]);

const { apiBase } = useRuntimeConfig().public;
const { data, status, error } = await useFetch<{ data: Image[] }>(
  `${apiBase}/get-images`,
  { lazy: true }
);
watchEffect(() => {
  if (status.value === 'success') {
    if (data.value) {
      // await new Promise((r) => setTimeout(r, 1000));
      imgList.value = data.value.data;
    }
    console.log(data.value.data);
  } else if (status.value === 'error') {
    console.error('Error loading images: ', error.value);
  }
});

I’m looking for a possible solution.