vue.jsvuejs2css-transitionsvue-material

vue-material state change ui update messing with layout

I have a login form with a submit button. As soon as you press the button a axios api request is sent. During this request the button should get disabled showing a spinner. Now, I managed to update the state accordingly using vuex. Now this looks like this:

enter image description here What is happening here? The transition from normal -> loading state works just fine. But transitioning back from loading -> normal as soon as the api request is done messes up the layout for a second or so, before the rendering engine (not sure) resets the layout and re-centers the label.

this is my template for the button:

    <md-button @click.prevent="onBtnLoginClicked"
               class="md-raised md-primary"
               :disabled="isExecutingLogin">
      <span v-if="!isExecutingLogin">
        Login
      </span>
      <span v-else-if="isExecutingLogin">
        <md-progress-spinner id="spinner" :md-diameter="20" :md-stroke="3"
                             md-mode="indeterminate"/>
      </span>
    </md-button>

Any idea how to fix this?

Solution

  • Add key to the spans. Issues like this do happen sometimes when switching between elements with the same name tag.

    <md-button @click.prevent="onBtnLoginClicked"
           class="md-raised md-primary"
           :disabled="isExecutingLogin">
  <span v-if="!isExecutingLogin" key="login">
    Login
  </span>
  <span v-else-if="isExecutingLogin" key="spinner">
    <md-progress-spinner id="spinner" :md-diameter="20" :md-stroke="3"
                         md-mode="indeterminate"/>
  </span>
</md-button>

    Codesandbox -- The code is in components/App.vue. The spinner won't show, though (unrelated to your issue).