So I have a component, which needs to be shown on the last page of the book, sometimes it isn't showing, for couple of seconds, sometimes you need to list back on the previous page and back on the last page for it to be shown. Also when I try throttling (slow internet) it doesn't show immediatelly
I don't know how to fix this
When dealing with components of important dimensions the best practice is to try and implement lazy loading techniques or, as Estus Flask pointed out, using AsyncComponents.
Using the following portion of code allows you to load a component as soon as possible so rendering time is not directly affected by the internet connection.
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)
Of course it might still happen the internet connection is so poor that the user will experience excessive loading time.
More infos at https://vuejs.org/guide/components/async.
To improve the user experience ui/ux best practices suggest also to use spinners or skeletons (https://learnvue.co/articles/vue-skeleton-loading), as kissu pointed out in his comment.
1. Add loading state:
<template>
<div>
<loading-spinner v-if="isLoading"/>
<your-component v-else v-cloak/>
</div>
</template>
<script>
export default {
data() {
return {
isLoading: true
}
},
mounted() {
this.isLoading = false;
}
}
</script>
2. Consider using async components:
const AsyncComponent = () => ({
component: import('./YourComponent.vue'),
loading: LoadingComponent,
delay: 200
})
