What is the best way to make a splash screen for loading data in a Vue SPA application?

Question

Vue.js

I have a SPA on Vue, with vue-router and vuex.

Before running the application, I would like to load a bunch of necessary data that is needed for the application to work. I decided to make a Splash Screen like in regular applications, and load data in the background

. I ran into a problem in the form of Vue routera.

The scheme is something like this:
'/' is just a "hello world" page without logic and other things, so data is not particularly needed
there, there is also
'/login' - here you need to enter data to enter (data is also not needed here, but you need to check person registered)
'/*' - other pages only after reloading data + authorization check

How I solved the problem:
I set up a hook in the router:

router.beforeEach(async function (to, from, next) {
    if (!to.meta.guest && !store.getters['app/initialized']) {
        await store.dispatch('app/initialize') // тут проблема в  том, что появляется просто белый экран, а хотелось бы видеть загрузку
    }
    next()
})