Delay on routes with the same component

Question

I am using vue router for routing with transitions and vuex to retreive and store content from a JSON API which all works.

The only problem occurs on routes that use the same component. For a second the old state of the component is visible after a route change and updates it about 2 seconds later with the new content. I guess because it is waiting for axios and updates it as soon as the state is available and can be mapped. I tried to add a v-if whith a loading animation, but since the old state is still mapped it doesnt work. What is the vue way to handle this?

I wonder if this is related to another problem - the transitions don´t work neither on routes with the same component, although I use an id <router-view :key="$route.params.id" /> Any help appreceated!

Router

<transition name="fade" mode="out-in" appear>
   <router-view :key="$route.params.id" />
</transition>

Component

export default {
    name: 'SinglePage',
    data() {
      return {
        page_slug: this.$route.params.page
      }
    },
    computed:{ 
      ...mapState({
        homepage_slug: state => state.settings.homepage,
        title: state => state.page.title,
        content: state => state.page.content,
        f_image: state => state.page.image
      })
    },
    watch: {
      '$route': function () { 
        this.page_slug = this.$route.params.page
        this.loadContent()
      }
    },
    methods: {
      loadContent: function(){
        if(this.$route.name == 'homepage'){
          this.$store.dispatch('LOAD_PAGE', { slug: this.homepage_slug })
        }
        else{
          const page_slug = this.$route.params.page
          this.$store.dispatch('LOAD_PAGE', { slug: page_slug })
        }
      }
    },
    mounted() {
      this.loadContent()
    }
}

Vuex / Axios

import axios from 'axios'

export default {
  state: {
    title: '',
    content: '',
    image: ''
  },
  actions: {
    LOAD_PAGE: function({ commit }, slug) {    
      axios
        .get('http://myjsonapi/pages?slug=' + slug.slug )
        .then(response => response.data)
        .then(page => {
          commit('SET_PAGE', page)
        })
      }
    },
    mutations: {
      SET_PAGE(state, page) {
        state.title = page[0].title.rendered,
        state.content = page[0].content.rendered,
        state.image = page[0].featured_img_url
      }
    },
    getters: {
    }
  }

Just_lbee Just_lbee · Accepted Answer · 2019-07-08T12:36:56

Try to use v-cloak in your app:

 <router-view :key="$route.params.id" v-cloak/>

css:

[v-cloak] {
  display: none;
}

Delay on routes with the same component

1 Answers