How to show a loader until 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?

Use a render blocking fetch composable, like `useAsyncData` I think. — kissu, Dec 22 '22 at 19:20
Can you please explain? I mean auto fetches the content file and shows. Show how can I use render-blocking fetch like this — nur_riyad, Dec 22 '22 at 19:31

score 0 · Accepted Answer · edited Jan 23 '23 at 08:25

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>

How to show a loader until loads?

1 Answers1