Problems with the work of preloader vue.js

Question

I'm trying to make showing preloader when i go from one component to another. I use this preloader. I create file loader.js and write there:

import Vue from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';

Vue.use(Loading);

let loader = Vue.$loading.show({
    loader: 'dots',
    color: '#5D00FF',
    zIndex: 999,
}); 
function loaderStart() {
    loader;
}
function loaderEnd() {
    loader.hide();
}

export default {loaderStart, loaderEnd}

loader,js i import to the index.js and there i write when i want to call loader start but it does not starting(withoun if in beforeResolve preloader is working). Here is index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Authorization from '@/components/Authorization'
import Main from '@/components/Main'
import loader from './loader'

Vue.use(Router)

const router = new Router({
    routes: [
    {
        path: '/',
        name: 'Main',
        component: Main,
    },
    {
        path: '/authorization',
        name: 'Authorization',
        component: Authorization
    }
  ]
})
router.beforeResolve((to, from, next) => {
    if(to.path) {
        loader.loaderStart()
    }
    next()
});
router.afterEach((to, from) => {
    loader.loaderEnd()
});
export default router;

Please, help me find the problem

@MatJ when we go to another rourer run method, smth like this — Tick-Tack
– Tick-Tack, Commented Jul 1, 2019 at 8:45
@MatJ then i see only preloader, it cover rest of the content on page and it don't stop — Tick-Tack
– Tick-Tack, Commented Jul 1, 2019 at 8:53

Max Sinev · Accepted Answer · 2019-07-01 13:53:10Z

4

+50

Your current loader will appear just once because you called show method once as well. You need to invoke show method every loaderStart call and store the loader:

let loader = null;
function loaderStart() {
    // it would be better to extract these values as constants 
    loader = Vue.$loading.show({
         loader: 'dots',
         color: '#5D00FF',
         zIndex: 999,
    }); 
}
function loaderEnd() {
    loader.hide();
}

Probably you have some async components since you added loader to routing logic, so you should use the beforeEach hook instead of the beforeResolve one.
```
router.beforeEach((to, from, next) => {
    loader.loaderStart()
    next()
});
router.afterEach((to, from) => {
   loader.loaderEnd()
});
```

Loader API docs (show method)

Vue-router guards

Vue-router navigation flow

answered Jul 1, 2019 at 13:53

Max Sinev

6,0192 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Max Sinev Over a year ago

@МаксимБуяков here is a codesandbox example (timer is just for the demo) codesandbox.io/s/vue-routing-example-syx2u

Tick-Tack Over a year ago

Yes, it turned out that it just did not have time to show yourself) with set time out it looks okay. But could you please tell me one more thing: if i want to show preloader, but dont want to show it 2 seconds every time(it shoud show only time that page loading) i gust need to write some code which "know" when page loading end set it in set time out?

Max Sinev Over a year ago

No, you shouldn't use setTimeout at all in that case, I added that just for demo to show that the loader works. If you don't have some lazy-loaded components it will never be shown. In your example in the question, your page components will be bundled in a single assembly(file) that's why your loader wasn't shown.

Collectives™ on Stack Overflow

Problems with the work of preloader vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related