vue-content-loader | SVG component to create placeholder | Animation library

I'm new to VueJS, and I'm coming to you to find out if what I've done is feasible or not.

Instead of having old data, while loading components, I prefer to display a preloader. I liked the idea of a skeletons loader, rather than a simple spinner.

Right now I have a state in the store, which is null by default, I have a mutation to set the loading, and a getter. To avoid visual bugs, from the router, with a beforeEach, I initialize the loading state to true, so that by default the components start loading !

Then, in my view, I import the Loader component, with its svg and style. And I place it over the component that needs to be displayed, with a simple condition v-if="!getLoading" and v-if="getLoading".

The problem is that I feel like I'm tinkering with the blind, the beforeach and displaying this component with a condition?

I would be reassured if someone can give me some advice, or approve this method of doing!

Here is the code of a simple Loader component