N
Nuxt7mo ago
Jonathan

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
No description
No description
24 Replies
Jonathan
Jonathan7mo ago
the home and product page code, like this:
No description
No description
Jonathan
Jonathan7mo 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
Jonathan7mo ago
GitHub
GitHub - JonathanSaan/calisaan: An Ecommerce about calisthenics
An Ecommerce about calisthenics . Contribute to JonathanSaan/calisaan development by creating an account on GitHub.
Jonathan
Jonathan7mo 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
anthony7mo ago
It could be the data is loading too fast, have you tried added a delay to see if that is the issue?
Jonathan
Jonathan7mo ago
shows this:
No description
No description
anthony
anthony7mo ago
I’ll share with you how I handle this. I’m at work at the moment but I’ll respond back soon
Jonathan
Jonathan7mo ago
okay
anthony
anthony7mo 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
Jonathan7mo ago
bro, the problem was actually here:
No description
Jonathan
Jonathan7mo ago
I changed it and it "worked"
Jonathan
Jonathan7mo ago
but when I restart the page, the skeleton stays forever
No description
No description
No description
No description
Jonathan
Jonathan7mo ago
No description
No description
Jonathan
Jonathan7mo ago
but when I go from one page to another, it works
No description
No description
anthony
anthony7mo ago
Can you share a repo or demo so I can debug the issue
Jonathan
Jonathan7mo 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
No description
Jonathan
Jonathan7mo ago
No description
Jonathan
Jonathan7mo 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
No description
No description
No description
Jonathan
Jonathan7mo ago
I managed to solve it here, I was using ref instead of computed
Jonathan
Jonathan7mo ago
I've been testing here and realized that I can't change the image when I select another one
No description
Jonathan
Jonathan7mo ago
i think problem is on setActiveImageOrSelectSize function
No description
No description
pyplacca
pyplacca7mo ago
You’re attempting to write to a computed state which isn’t writable. That won’t work
Jonathan
Jonathan7mo 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
Want results from more Discord servers?
Add your server