30 Replies
do ionly need to add that one code inside my app.vue? because it doesn't show up at all
Yeah, just that. It shows when navigating from one page to another or when fetching data
how would i do it for page rendering? i have images load upon redirecting to a page but it renders so slow
Nuxt
useLoadingIndicator · Nuxt Composables
This composable gives you access to the loading state of the app page.
Or are you asking about showing loading skeletons for images when loading?
i tried using this but it keeps getting stuck in loading state. am i missing something?
Do you call the
stop method?
…after the images have loaded?how would i determine whether it's loaded?
You can listen to the load event if you’re using an
img elementhow'd you do that?
MDN Web Docs
HTMLElement: load event - Web APIs | MDN
The load event fires for elements containing a resource when the resource has successfully loaded. Currently, the list of supported HTML elements are: , , , <img>, <link>, <object>, <script>, <style>, and <track>.
alright, i'll try
I’ll try and get you a sample code when I get home. Provided you haven’t resolved it by then
alright, thank you so much :D
in case you might misunderstand what i'm trying to imply, here's the showcase. so apparently there should be collection of images inside the
/uploads page, but they're not fully rendered yet. i wanted to create a loading before being redirected to upload page until the images are loadedalso you can see here the images' border. the images themselves haven't showed up
So you want to block the navigation until the images have been loaded?
yes
Hmm. I’m not sure how that’s going work if the elements don’t exist in the DOM
Unless you’re trying to fetch a list of posts from a server before navigating. If so you can use
useAsyncData in the page the displays the list of postsdo you have a sample code for that?
This should help
https://nuxt.com/docs/api/composables/use-async-data
Nuxt
useAsyncData · Nuxt Composables
useAsyncData provides access to data that resolves asynchronously in an SSR-friendly composable.
I’ll get you samples for both suggestions once I get home
alright, thanks
This is technically possible but I don’t think it’s worth the effort. It would even be really bad for user experience
@furokuri
https://stackblitz.com/edit/github-ctwyq4?file=app.vue,components%2FImage.vue,pages%2Findex.vue,pages%2Fposts.vue
thank you, i'll try now
it works! thank you so much :D
small question, how would i apply the loading to all pages?
Which loading?
the loading indicator
i want it to show to basically all pages i navigate through
Insert it in the app.vue
You can check the app.vue file in the demo
alright