Nuxt•9mo ago

Loading indicator after manually reload the page

Hi, i'm a beginner with nuxt but i came from react nextjs world. Maybe i misunderstood something but i'm stuck a little with the initial loading screen or indicator. I'm using the useLayzFetch composable, and as the docs suggest, handle the loading state in the page. Its working nicelly if im navigating in the application, but when i hit the refresh button, the pending state not showing. It looks like the useLazyFetch still waits for the results. In the nextjs there is a loading.jsx page component and that appears initially when something async happens on the server. I know this is not the same architecture, but its a bit anoying because when i see some video about this useLazyFetch, it looks like working like a charm. What i miss here? Help. There is an option for showing a loading indicator during the first page load async operation or not?

<script setup lang="ts">
const BASE = "https://api.scryfall.com";
const url = new URL("/cards/random", BASE);
url.searchParams.append("q", `-c:colorless -t:land year>=2010`);
const { pending, data: card } = useLazyFetch(url.toString());
</script>

<template>
  <div v-if="pending">Loading....</div>
  <div v-else>
    <div>
      <h1 class="text-3xl font-bold underline">MTG Card guesser</h1>
      <pre>{{ JSON.stringify(card, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
const BASE = "https://api.scryfall.com";
const url = new URL("/cards/random", BASE);
url.searchParams.append("q", `-c:colorless -t:land year>=2010`);
const { pending, data: card } = useLazyFetch(url.toString());
</script>

<template>
  <div v-if="pending">Loading....</div>
  <div v-else>
    <div>
      <h1 class="text-3xl font-bold underline">MTG Card guesser</h1>
      <pre>{{ JSON.stringify(card, null, 2) }}</pre>
    </div>
  </div>
</template>

Thanks 🙂

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Loading indicator after manually reload the page