How to show a loader until <ContentDoc /> loads?

Question

In my nuxt 3 project, I have a simple layout like

<template>
  <div >
    <navbar />
    <div>
      <slot />
    </div>
    <footer />
  </div>
</template>

And a page then renders the content with above layout name blog

<script setup lang="ts">
definePageMeta({
  layout: "blog",
});
</script>

<template>
  <main>
    <ContentDoc />
  </main>
</template>

My problem is, in the very first load, my navbar and footer showed. After some delay, the content load in the UI. How to stop the delay or show loader in that time?

Answer 1

I found a workaround. Until there is a proper answer, I am using this workaround. I am sharing this below.

Instead of using <ContentDoc /> we can also use <ContentRenderer :value="articles"> component provided by nuxt-content-v2.

But as you can see for using ContendRenderer we need to pass the content data to this component as props.

So I used queryContent() function to fetch the content data first then pass it as a props to the ContentRenderer component.

In this way I prevent the initial content load delay in the UI.

In Code my layout is as previous,

<template>
  <div >
    <navbar />
    <div>
      <slot />
    </div>
    <footer />
  </div>
</template>

And a page that render this the blog page,

<script setup lang="ts">
  definePageMeta({
    layout: "blog",
  });
  const { path } = useRoute()
  const articles = await queryContent(path).findOne()
</script>

<template>
  <main>
    <div>
      <ContentRenderer :value="articles">
        <template #empty>
          <p>No content found.</p>
        </template>
      </ContentRenderer>
    </div>
  </main>
</template>