Nuxt•4mo ago

skeleton does not work on dynamic routes

guys, can anyone help me? the skeleton is appearing on the main page but on the page where the product is shown, not

24 Replies

Jonathan•4mo ago

the home and product page code, like this:

Jonathan•4mo ago

I tried adding server: false to the code as well, but it doesn't work This server: false only works on the main page my bad for my poor english dont worked

Jonathan•4mo ago

its here: https://github.com/JonathanSaan/calisaan

GitHub

GitHub - JonathanSaan/calisaan: An Ecommerce about calisthenics

An Ecommerce about calisthenics . Contribute to JonathanSaan/calisaan development by creating an account on GitHub.

Jonathan•4mo ago

its here the stackblitz: https://stackblitz.com/~/github.com/JonathanSaan/calisaan i don't understand I don't know much about these more technical things but the problem is already reproduced when the application is running there are no errors in the console or terminal, the skeleton just doesn't appear on the dynamic page. in /product/${id}/{$name} is the skeleton showing up for you? on the dynamic route that's the problem. the skeleton doesn't appear regardless of whether the data has been loaded or not. if the page is restarted, which is when the skeleton should appear, it doesn't appear

anthony•4mo ago

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

Jonathan•4mo ago

shows this:

anthony•4mo ago

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

Jonathan•4mo ago

okay

anthony•4mo ago

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);
});

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

Jonathan•4mo ago

bro, the problem was actually here:

Jonathan•4mo ago

I changed it and it "worked"

Jonathan•4mo ago

but when I restart the page, the skeleton stays forever

Jonathan•4mo ago

but when I go from one page to another, it works

anthony•4mo ago

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

Jonathan•4mo ago

its here bro: https://stackblitz.com/~/github.com/JonathanSaan/calisaan

Jonathan•4mo ago

I was testing here and realized that the problem is specifically in the activeImage variable, when I remove this variable and the image, the page works

Jonathan•4mo ago

I think the message I sent yesterday wasn't there, so I'll say it again, it's almost working, but the problem is in the image

Jonathan•4mo ago

I managed to solve it here, I was using ref instead of computed

Jonathan•4mo ago

I've been testing here and realized that I can't change the image when I select another one

Jonathan•4mo ago

i think problem is on setActiveImageOrSelectSize function

pyplacca•4mo ago

You’re attempting to write to a computed state which isn’t writable. That won’t work

Jonathan•4mo ago

now i've managed to solve it for real. i changed a few things and added watchEffect to the project and it worked thank you for trying to help me

Gaming

Programming

skeleton does not work on dynamic routes