I've got a strange bug with my Nuxt site where I have a list of data. When the user clicks on 'View' it's meant to navigate to a page with further details. It does this, but before it shows the new page it flashes a version of the current page showing the table without the data. Has anyone come across something like this before?
I've added screenshots. The middle one (during) is the issue.
Here's the code for the page that lists the info in a table:
<script setup lang="ts">
const client = useSupabaseClient();
const { data: musicians } = await useAsyncData("musicians", async () => {
const { data } = await client
.from("musicians")
.select("id, name, years, wikipedia_link, spotify_link")
.order("name");
return data;
});
const allMusicians = ref(musicians);
</script>
<template>
<div class="px-4 py-6">
<Heading title="Musicians" :description="`${musicians?.length} records`" />
<Table>
<TableHeader>
<TableRow>
<TableHead class="font-bold"> Name </TableHead>
<TableHead class="font-bold"> Years </TableHead>
<TableHead class="font-bold text-right"> Action </TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="musician in musicians" :key="musician.id">
<TableCell class="font-medium">
{{ musician.name }}
</TableCell>
<TableCell>{{ musician.years }} </TableCell>
<TableCell class="font-bold text-right">
<NuxtLink :to="`./artist/${musician.id}`">View</NuxtLink>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</template>
And here's the code of the page the user navigates to:
<script setup>
const user = useSupabaseUser();
const supabase = useSupabaseClient();
const route = useRoute();
const artistSpotify = ref("");
const isFavourite = ref(false);
const isLoaded = ref(false);
// get the musician data from the supabase table
const { data: musician } = await useAsyncData("musicians", async () => {
const { data } = await supabase
.from("musicians")
.select("id, name, spotify_embed, wikipedia_link, spotify_link")
.eq("id", route.params.slug)
.limit(1)
.single();
return data;
});
// get the musician name and change it to a format that we can use in Wikipedia's rest API
const key = musician.value.name.trim().replace(/'/g, "%27").replace(/ /g, "_");
var url = `https://en.wikipedia.org/api/rest_v1/page/summary/${key}`;
var relatedUrl = `https://en.wikipedia.org/api/rest_v1/page/related/${key}`;
const { data: count } = await useFetch(url);
const { data: relatedContent } = await useFetch(relatedUrl);
// check favourites table
const { data, error } = await supabase
.from("favourites")
.select("favourite_id")
.eq("favourite_id", user.value.id + route.params.slug);
if (data.length > 0) {
isFavourite.value = true;
}
// get the musician ID to be used for the embed
if (musician.value.spotify_link) {
let newSubstring = musician.value.spotify_link;
artistSpotify.value = newSubstring.substring(
newSubstring.lastIndexOf("/") + 1,
newSubstring.lastIndexOf("?")
);
}
// add favourite functionality
async function addFavourite(id) {
isFavourite.value = true;
try {
const user = useSupabaseUser();
const { data } = await supabase
.from("favourites")
.upsert({
favourite_id: user.value.id + id,
user_id: user.value.id,
post_id: id,
})
.select();
if (error) throw error;
} catch (error) {
alert(error.message);
} finally {
}
}
// change loaded state on mount
onMounted(async () => {
return (isLoaded.value = true);
});
</script>
<template>
<div class="px-4 py-6">
<Heading :title="musician.name" :description="count.description" />
<section class="text-gray-600 body-font">
<div class="container flex flex-col">
<div class="lg:w-5/6">
<div class="flex flex-col sm:flex-row mt-1">
<div class="sm:w-1/3 text-center sm:pr-8 sm:py-8">
<img
v-if="count.thumbnail"
class="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400 object-cover object-left-top"
:src="count?.thumbnail?.source"
alt="Rounded avatar"
/>
<div
class="flex flex-col items-center text-center justify-center"
>
<h2 class="font-medium title-font mt-4 text-gray-900 text-lg">
{{ count.title }}
</h2>
<div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
<p class="text-base">
{{ count.description }}
</p>
<div class="mt-4 w-full">
<a
v-if="isFavourite"
:data-id="count.id"
@click.prevent="addFavourite(musician.id)"
class="text-white bg-[#EF4444] hover:bg-[#EF4444]/90 focus:ring-4 focus:outline-none focus:ring-[#EF4444]/50 font-medium rounded-lg text-sm px-3 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 me-2"
>
<IconsHeartFull />
</a>
<a
v-else
:data-id="count.id"
@click.prevent="addFavourite(musician.id)"
class="text-white bg-[#24292F] hover:bg-[#24292F]/90 focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-3 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 me-2"
>
<IconsHeartOutline />
</a>
<a
v-if="musician.wikipedia_link"
:href="musician.wikipedia_link"
target="_blank"
class="text-white bg-[#24292F] hover:bg-[#24292F]/90 focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-3 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 me-2"
>
</a>
<!-- Spotify link -->
<a
v-if="musician.spotify_link"
:href="musician.spotify_link"
target="_blank"
class="text-white bg-[#24292F] bg-green-500 hover:bg-[#24292F]/90 focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-3 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 me-2"
>
</a>
</div>
</div>
</div>
<div
class="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left"
>
<p class="leading-relaxed text-lg mb-4">
{{ count.extract }}
</p>
<a
class="text-indigo-500 inline-flex items-center"
:href="count.content_urls.desktop.page"
>Learn More
</a>
<div v-if="musician.spotify_link">
<iframe
class="mt-4"
v-if="isLoaded"
style="border-radius: 12px"
:src="`https://open.spotify.com/embed/artist/${artistSpotify}?utm_source=generator&theme=0`"
width="100%"
height="152"
frameBorder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
></iframe>
<div
v-else
role="status"
class="space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center"
>
<div
class="flex items-center justify-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700"
>
</div>
<div class="w-full">
<div
class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"
></div>
<div
class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[480px] mb-2.5"
></div>
<div
class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"
></div>
<div
class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[440px] mb-2.5"
></div>
<div
class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[460px] mb-2.5"
></div>
<div
class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"
></div>
</div>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
I've tried making sure there aren't any errors causing the page load to slow down. I've also tried taking some of the data in the Artists page out (like the spotify embed) just in case that was causing it.
const { data: musicians } = await useAsyncData("musicians", async () => {