anthony Comments - Answer Overflow

anthony

Posts Comments

NNuxt

•Created by Jonathan on 4/2/2024 in #❓・help

skeleton does not work on dynamic routes

Can you share a repo or demo so I can debug the issue

35 replies

NNuxt

•Created by Jonathan on 4/2/2024 in #❓・help

skeleton does not work on dynamic routes

Currently building this out but I use these methods here --- https://fairshopping.io/

35 replies

NNuxt

•Created by Jonathan on 4/2/2024 in #❓・help

skeleton does not work on dynamic routes

Sorry for the delay. This is how I do this. I set a const with a boolean of always true (because it should always be true initially) const loading = ref<boolean>(true);

const { pending, execute: productExecute } = await useAsyncData(
  "products",
  async () => {
    loading.value = true;
    const { data } = await client
      .from("product_listings_homepage")
      .select("*")
      .eq("slug", route.params.slug);
    products.value = [...products.value, ...data];

    loading.value = false;
  },
  {
    server: true,
    lazy: true,
    immediate: false,
  }
);

const { pending, execute: productExecute } = await useAsyncData(
  "products",
  async () => {
    loading.value = true;
    const { data } = await client
      .from("product_listings_homepage")
      .select("*")
      .eq("slug", route.params.slug);
    products.value = [...products.value, ...data];

    loading.value = false;
  },
  {
    server: true,
    lazy: true,
    immediate: false,
  }
);

then inside template if we're not loading we need to show the actual data

<template v-if="!loading">
Data shows here
</template>
<template v-else>
show skeleton
</template>

<template v-if="!loading">
Data shows here
</template>
<template v-else>
show skeleton
</template>

if you set the useAsyncData to immediate: false you'll need to also call the function to run it. I set a timeout within the onMounted so the skeleton has enough time to show and its not too flashy.

onMounted(async () => {
  setTimeout(async () => {
    await productExecute();
  }, 500);
});

onMounted(async () => {
  setTimeout(async () => {
    await productExecute();
  }, 500);
});

35 replies

NNuxt

•Created by Jonathan on 4/2/2024 in #❓・help

skeleton does not work on dynamic routes

I’ll share with you how I handle this. I’m at work at the moment but I’ll respond back soon

35 replies

NNuxt

•Created by Jonathan on 4/2/2024 in #❓・help

skeleton does not work on dynamic routes

It could be the data is loading too fast, have you tried added a delay to see if that is the issue?

35 replies

BRBuildShip + Rowy

•Created by anthony on 2/12/2024 in #❓・buildship-help

Unable to delete workflow

I actually was able to delete the project and redeploy into a different location, no futher errors or issues.

2 replies

Gaming

Programming