How to remove state jumps in vue app?

Question

Vue.js

hello everyone :)
action

checkAuthStatus ({ commit }) {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        commit('checkAuthStatus', {
          status: true,
          user
        })
      } else {
        commit('checkAuthStatus', {status: false})
      }
    })
  }

and mutein

checkAuthStatus (state, data) {
    state.user.name = data.user.displayName
    state.user.email = data.user.email
    state.authenticated = data.status
  }

when mounted, dispatch an action in the component and do an authenticated check, if logged in, I remove the login button and put the user name there, but when the page is refreshed, the login button jumps, how to remove it?

Answer 1

1. The component rendered
2. The action sent data to the Firebase API.
3. ...............
4. Logged in!
You did not take into account that in paragraph 3, the data travels over the network for non-zero time. They walk, and you see the button.
Add a state check in the component and don't show the button until there is data.

<template v-if="authenticated">
   <кнопка />
</template>
export default {
   computed: {
      authenticated: return this.$store.getters.authenticated
   }
}

Something like this. Is it possible to show some spinner in<template v-else>

Answer 2

Options:
1. authenticated make null by default, v-if="authenticated !== null" on the block that is responsible for displaying the login button or link to the user.
2. Spinner until data is received.