Display a loading screen to the user while Vue lazy loads the content

Question

Display a loading screen to the user while Vue lazy loads the content

I am currently implementing lazy loading features for my single-page application using Vue.js and Laravel Mix 5. I am looking for a way to display a loading page to prevent the app from appearing unresponsive while new pages are loading.

I attempted to add the following code:

<template>
<div>
    <!-- header -->
    <transition 
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
        mode="out-in"
    >
        <router-view name="header"></router-view>
    </transition>
    
    <!-- body -->
    <transition 
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
        mode="out-in"
    >
        <router-view></router-view>
    </transition>
    
</div>
</template>

Initially, I expected this code to trigger a fade-out animation while waiting for the new page to load. However, in reality, the screen does not animate as expected and the app seems unresponsive (even though buttons still function).

My proposed solution is that when a user clicks to navigate to a new page, I want to hide or remove the current page to indicate that something is happening behind the scenes and prevent users from repeatedly clicking buttons, thinking the website is unresponsive.

javascript vue.js lazy-loading

Answer 1

Answer №1

After thorough research, I finally discovered the solution to my problem.

Firstly, using Vuex to pass variables or information is necessary. Then, simply integrate it into the router function like so:

router.beforeEach((to, from, next)=>{
  store.commit('setLoading', true)
  next()
})
router.afterEach((to, from)=>{
  store.commit('setLoading', false)
})

In my app.vue file, I added the following code:

<template>
<div>
    <!-- header -->
    <transition 
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
        mode="out-in"
    >
        <router-view name="header"></router-view>
    </transition>
    
    <!-- body -->
    <transition 
        enter-active-class="animated fadeIn"
        leave-active-class=""
        mode="out-in"
    >
        <loading-page v-if="isLoading"></loading-page>
        <router-view v-else></router-view>
    </transition>
    
</div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import loadingPage from "./views/loading.vue";

    export default {
        components: {
            loadingPage
        },
        computed:{
            ...mapGetters('global',{
                isLoading: 'isLoading'
            }),
        },
    }
</script>

Here is my simple loading screen with a progress bar:

<template>
    <div>
        <!-- page container -->
        <div class="page-content">
            <div class="content-wrapper">
                <div class="content">

                    <div class="card card-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-info progress-bar-striped progress-bar-animated" style="width: 100%">
                                <span class="sr-only">100% Complete</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
    </div>
</template>

As for my Vuex setup:


export const global = {
  namespaced: true,
  
  // state
  state: {
    isLoading: '',
  },

  // getters
  getters: {
    isLoading: state => state.isLoading,
  },

  // actions
  actions: {

    // change data
    setLoading({commit}, type){
      commit('setLoading', type);
    },
  },

  // mutations
  mutations: {

    setLoading ( state, type ){
      state.isLoading = type;
    },
  }
}

Now, the loading screen will display whenever a user navigates to a page that has not yet loaded in their browser.

Answer 2

After thorough research, I finally discovered the solution to my problem.

Firstly, using Vuex to pass variables or information is necessary. Then, simply integrate it into the router function like so:

router.beforeEach((to, from, next)=>{
  store.commit('setLoading', true)
  next()
})
router.afterEach((to, from)=>{
  store.commit('setLoading', false)
})

In my app.vue file, I added the following code:

<template>
<div>
    <!-- header -->
    <transition 
        enter-active-class="animated fadeInDown"
        leave-active-class="animated fadeOutUp"
        mode="out-in"
    >
        <router-view name="header"></router-view>
    </transition>
    
    <!-- body -->
    <transition 
        enter-active-class="animated fadeIn"
        leave-active-class=""
        mode="out-in"
    >
        <loading-page v-if="isLoading"></loading-page>
        <router-view v-else></router-view>
    </transition>
    
</div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import loadingPage from "./views/loading.vue";

    export default {
        components: {
            loadingPage
        },
        computed:{
            ...mapGetters('global',{
                isLoading: 'isLoading'
            }),
        },
    }
</script>

Here is my simple loading screen with a progress bar:

<template>
    <div>
        <!-- page container -->
        <div class="page-content">
            <div class="content-wrapper">
                <div class="content">

                    <div class="card card-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-info progress-bar-striped progress-bar-animated" style="width: 100%">
                                <span class="sr-only">100% Complete</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
    </div>
</template>

As for my Vuex setup:


export const global = {
  namespaced: true,
  
  // state
  state: {
    isLoading: '',
  },

  // getters
  getters: {
    isLoading: state => state.isLoading,
  },

  // actions
  actions: {

    // change data
    setLoading({commit}, type){
      commit('setLoading', type);
    },
  },

  // mutations
  mutations: {

    setLoading ( state, type ){
      state.isLoading = type;
    },
  }
}

Now, the loading screen will display whenever a user navigates to a page that has not yet loaded in their browser.

Display a loading screen to the user while Vue lazy loads the content

Answer №1

Similar questions

Tips for displaying a modal to a user only once

Using React to dynamically assign a backgroundImage based on a JSON response

Finding the correct path for ts-loader with webpack version 2.2.1 within a script

While working with AJAX, the variable value remains static and is not refreshed

Transforming a high chart into an image and transmitting it to the server through an ajax request

CSS Testimonial Slider - Customer Feedback Display

Using Node http-middleware-proxy and integrating it with Express to communicate with Tomcat server

Ways to customize a directive to show conditionally with no need for container elements

Securing a namespace using passport js: A step-by-step guide

What steps can be taken to provide accurate information in the absence of ImageData?

Tips for efficiently saving data using await in Mongoose

When zooming out, Leaflet displays both tile layers

Synchronous execution of functions in Node.js

Utilizing the power of Koa.js in conjunction with MongoDb for seamless development

Executing a JavaScript function within a PHP echo statement

Learn how to configure your Angular uib-typeahead to display suggestions as soon as the model is bound

Which one should I use: ng-repeat or ng-options?

No styles are appearing on a specific element after running a specific jQuery function on that element within a Vue page

Passport Authentication does not initiate a redirect

Obtaining Asynchronous JavaScript responses with Selenium Webdriver