[Vuejs]-Displaying v-progress-circular in a conditional is making the below elements "jumpy"

by

1👍

✅

I suspect that you are using v-if="sending" on the parent <div>. When sending==false the v-if directive will completely remove it from the DOM. You can’t even use v-show because although this will keep it in the DOM, it will have "display: none" css so it it still wont take up any space.

Instead, you need to set the visibility: hidden css to hide the spinner without collapsing the space it takes up.

You can do this in two ways:

<div :style="{visibility: sending ? 'visible' : 'hidden'}">
   <v-progress-circular ...>
<div>

Or, create a re-usable custom directive:

Vue.directive('visible', function(el, binding) {
    el.style.visibility = !!binding.value ? 'visible' : 'hidden';
});

Then use it like so:

<div v-visible="sending">
   <v-progress-circular ...>
<div>

Leave a comment