NuxtJS - I want to know how to implement Loading only for specific pages - vue.js

Question

I want to display the Nuxt Loading component only on the top page, but it will be displayed on all pages. Can't I display it only when I access a specific page?
Also, the page will be output momentarily before the loading screen starts. Do you know what caused it?
nuxt.config.js
export default {
..
loading: '#/components/Organisms/PageLoading.vue',
..
}
layouts/default.vue
<template>
<div>
<org-page-loading />
</div>
</template>
<script>
import PageLoading from "../components/Organisms/PageLoading";
export default {
name: "Default",
components: {
"org-page-loading": PageLoading,
},
mounted() {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(function () {
this.$nuxt.$loading.finish()
}, 2400)
})
},
}
</script>

Answer 1

You can do something like this:
// your-component.vue
<template>
<h1>My Custom page</h1>
</template>
<script>
export default {
loading: false
}
</script>

Answer 2

So firstly the $nextTick probably makes your page show before loading.
Secondly I have never used this kind of loading component, but if you make your own loading component, you can pass a prop to it dynamically, which tells it on which page you want it to be and if the url is not matching, or the component name is not matching it will not show
<your-custom-loading :page="routerLinkYouWantItToBeShownOn" />
EDIT:
I found a better solution:
Heres the spinner/loading component
<template>
<div class="spinner"></div>
</template>
<style lang="css">
.spinner {
position: absolute;
height: 60px;
width: 60px;
border: 3px solid transparent;
border-top-color: var(--v-success-base);
top: 50%;
left: 50%;
margin: -30px;
border-radius: 50%;
animation: spin 2s linear infinite;
z-index: 100;
&:before,
&:after {
content: '';
position: absolute;
border: 3px solid transparent;
border-radius: 50%;
}
&:before {
border-top-color: var(--v-error-base);
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
animation: spin 3s linear infinite;
}
&:after {
border-top-color: var(--v-accent-lighten1);
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
animation: spin 4s linear infinite;
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
And here is how u call it:
<template>
<div>
<loading> v-if="isLoading" />
<div v-else>Your other content</div>
</div>
</template>
<script>
import Loading from '#/components/Loading';
export default {
components: {
Loading
},
computed: {
isLoading(){
return "your condition for loading"
}
},
</script>
And you can use a data variable for isloading set to true by default and when u visit the page it will be loading by default
dont even need props