So my custom loader is not loading instantly only like a split second then it loads here is my site, my goals is to my custom components load. PS when i change ssr to false it works here is my site: https://micahkwaka.dev
export default {
loading: '~/components/LoadingBar.vue',
loadingIndicator: false,
ssr: true,
pageTransition: {
name: 'my-page',
mode: 'out-in'
},
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
}
EDIT: This loader is when you have an SPA, to wait for it to load before showing the content. Since you're using Nuxt as an universal app (ssr + client), you will have the static content first (before the JS kicks in, and therefore your animation). So, you could make one with static SVG/CSS but the backed-in JS loader is not the solution here.
The best way would be to disable the JS to test the final result. Still, I'm pretty sure that Google will give you a better rating if you do not have any loader. You could maybe add it to your page transitions tho.
For the animation itself, start with it, then setTimeout the removal of it after 500ms or alike. Plenty ways of doing it. But you will need to have it on the initial render of your page (before the JS hydration).
Why do you set the loadingIndicator to false if you want it ?
If you want a custom one, provide a path to key as explained in the documentation: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading-indicator/
