How to display a "loading" animation while a lazy-loaded route component is being loaded?

I have split my app into multiple chunks with webpack's code splitting feature so that the entire application bundle isn't downloaded when the user visits my webpage.

The chunks that some routes require can be reasonably large and may take a noticeable amount of time to download. This is fine, except the user is not aware that the page is actually loading when they click an internal link, so I need to somehow display a loading animation or something.

My router is configured like this:

[
  {
    path: '/',
    component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'),
  },
  {
    path: '/foo',
    component: () => import(/* webpackChunkName: 'main' */ './foo.vue'),
  },
  {
    path: '/bar',
    component: () => import(/* webpackChunkName: 'main' */ './bar.vue'),
  },
]

Advanced Async Components in the Vue.js guide shows how to display a particular "loading" component while the component is being resolved -- this is exactly what I need, however it also says:

Note that when used as a route component in vue-router, these properties will be ignored because async components are resolved upfront before the route navigation happens.

How can I achieve this in vue-router? If this is not possible, lazily-loaded components would be pretty much useless to me because it would provide a poor experience to the user.

You can use navigation guards to activate/deactivate a loading state that shows/hides a loading component:

If you would like to use something like "nprogress" you can do it like this:

http://jsfiddle.net/xgrjzsup/2669/

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})
router.afterEach(() => {
  NProgress.done()
})

Alternatively, if you want to show someting in-place:

http://jsfiddle.net/h4x8ebye/1/

Vue.component('loading',{ template: '<div>Loading!</div>'})

const router = new VueRouter({
  routes
})

const app = new Vue({
  data: { loading: false },
  router
}).$mount('#app')

router.beforeEach((to, from, next) => {
  app.loading = true
    next()
})

router.afterEach(() => {
  setTimeout(() => app.loading = false, 1500) // timeout for demo purposes
})

Then in the template:

<loading v-if="$root.loading"></loading>
  <router-view v-else></router-view>

That could also be easily encapsulated in a very small component instead of using the $root component for the loading state.

How To Display an Element on Hover, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Windows chooses the best display settings for your PC based on your monitor. If you want to adjust your display settings, or if they were changed and you want to restore default settings, here are a few things you can try.

For what it's worth, I'll share what I ended up doing for my situation.

I'm using Vuex so it was easy to create an app-wide "loading" state which any component can access, but you can use whatever mechanism you want to share this state.

Simplified, it works like this:

function componentLoader(store, fn) {
  return () => {
    // (Vuex) Loading begins now
    store.commit('LOADING_BAR_TASK_BEGIN');

    // (Vuex) Call when loading is done
    const done = () => store.commit('LOADING_BAR_TASK_END');

    const promise = fn();
    promise.then(done, done);
    return promise;
  };
}

function createRoutes(store) {
  const load = fn => componentLoader(store, fn);

  return [
    {
      path: '/foo',
      component: load(() => import('./components/foo.vue')),
    },
    {
      path: '/bar',
      component: load(() => import('./components/bar.vue')),
    },
  ];
}

So all I have to do is wrap every () => import() by my load() function which takes care of setting the loading state. Loading is determined by observing the promise directly instead of relying on router-specific before/after hooks.

How to Display the American Flag, Show patriotism by displaying the American flag this 4th of July. We have all the information you need to display flags, observe flag holidays,� Define display. display synonyms, display pronunciation, display translation, English dictionary definition of display. v. dis·played , dis·play·ing , dis·plays v. tr. 1. a. To present to view; cause to be seen: The doctor displayed her diploma on the wall of her office.

you can use this code for gobel route in one project of vuejs

const router = new Router({
  routes: [
      { path: '/', name: 'home', component: Home },
      { path: '/about', name: 'about', component: About }
  ]
})

router.beforeResolve((to, from, next) => {
  // If this isn't an initial page load.
  if (to.name) {
      // Start the route progress bar.
      NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  // Complete the animation of the route progress bar.
  NProgress.done()
})

Flag Etiquette and Rules | How to Display Flags, General Flag Display � image002[1] 1. When displayed either horizontally or vertically against a wall, the union should be uppermost and to the flag's own right,� Display definition, to show or exhibit; make visible: to display a sign. See more.

How to Display the American Flag Outdoors, Our flag experts show you how to properly display the American flag outside of your house. Learn how to display the US flag on a flag pole, horizontally,� display definition: 1. to arrange something or a collection of things so that it can be seen by the public: 2. to show…. Learn more.

How to Display an American Flag, This Home Depot guide gives you guidelines on how to properly display your Stars and Stripes according to the U.S. flag code. Display zeros as blanks or dashes. Use the IF function to do this. Use a formula like this to return a blank cell when the value is zero: =IF(A2-A3=0,””,A2-A3) Here’s how to read the formula. If 0 is the result of (A2-A3), don’t display 0 – display nothing (indicated by double quotes “”). If that’s not true, display the result

[PDF] Guidelines for Display of the Flag, Guidelines for Display of the Flag. Public Law 94-344, known as the Federal Flag Code, contains rules for handling and displaying the U.S. flag. While the� 34 synonyms of display from the Merriam-Webster Thesaurus, plus 65 related words, definitions, and antonyms. Find another word for display. Display: a public showing of objects of interest.

Comments
  • It seems in the second example the next() function isn't defined; however, the process still runs and documentation shows it as a defined method in the vuejs router?
  • Hi Linus, are you able to elaborate on the following statement? "That could also be easily encasulated in a very small component instead of using the $root component for the loading state." Not really sure what you're referring to here
  • Using beforeEach doesn't help when deep-linking to some page (using someurl#/foo), as it doesn't get called initially. beforeEnter could be used, but has no access to 'app' initially. Do you have a solution to show a loading spinner when deep linking too?
  • You should probably open a new topic, I don't see how to discuss this in an answer's comments.
  • @linusborg created question on it's own for this, see stackoverflow.com/q/49276470/176140