feat: Prevent q-btn loading state from resizing the button quasarframework#2799 (quasarframework#2818)

close quasarframework#2799

Author: pdanpdan

src/components/btn/QBtn.js

@@ -153,6 +153,32 @@ export default {
     this.__cleanup()
   },
   render (h) {
+    const inner = [].concat(this.$slots.default)
+
+    if (this.icon !== void 0) {
+      inner.unshift(
+        h(QIcon, {
+          class: { 'on-left': this.label !== void 0 && this.isRectangle === true },
+          props: { name: this.icon }
+        })
+      )
+    }
+
+    if (this.label !== void 0 && this.isRectangle === true) {
+      inner.unshift(
+        h('div', [this.label])
+      )
+    }
+
+    if (this.iconRight !== void 0 && this.isRound === false) {
+      inner.push(
+        h(QIcon, {
+          staticClass: 'on-right',
+          props: { name: this.iconRight }
+        })
+      )
+    }
+
     return h(this.isLink ? 'a' : 'button', {
       staticClass: 'q-btn inline relative-position q-btn-item non-selectable',
       'class': this.classes,
@@ -182,29 +208,18 @@ export default {
       h('div', {
         staticClass: 'q-btn-inner row col items-center q-popup--skip',
         'class': this.innerClasses
-      },
-      this.loading
-        ? [ this.$slots.loading || h(QSpinner) ]
-        : [
-          this.icon
-            ? h(QIcon, {
-              'class': { 'on-left': this.label && this.isRectangle },
-              props: { name: this.icon }
-            })
-            : null,
-
-          this.label && this.isRectangle ? h('div', [ this.label ]) : null,
-
-          this.$slots.default,
-
-          this.iconRight && this.isRectangle
-            ? h(QIcon, {
-              staticClass: 'on-right',
-              props: { name: this.iconRight }
-            })
-            : null
-        ]
-      )
+      }, inner),
+
+      this.loading !== null
+        ? h('transition', {
+          props: { name: 'q-transition--fade' }
+        }, this.loading === true ? [
+          h('div', {
+            key: 'loading',
+            staticClass: 'absolute-full flex flex-center'
+          }, this.$slots.loading !== void 0 ? this.$slots.loading : [h(QSpinner)])
+        ] : void 0)
+        : null
     ])
   }
 }

src/components/btn/btn-default.ios.styl

@@ -17,8 +17,12 @@
   .q-icon, .q-spinner
     font-size 1.4em
   // workaround for alignment/sizing change when showing loader
-  .q-btn-inner:before
-    content ''
+  .q-btn-inner
+    transition opacity .6s
+    &--hidden
+      opacity 0
+    &:before
+      content ''
 
   &.disabled
     opacity .7 !important
@@ -79,3 +83,16 @@
 .q-btn-fab-mini
   height 40px
   width 40px
+
+.q-transition
+
+  &--fade
+
+    &-leave-active
+      position absolute
+
+  &--fade
+    &-enter-active, &-leave-active
+      transition opacity .4s ease-out
+    &-enter, &-leave, &-leave-to
+      opacity 0

src/components/btn/btn-default.mat.styl

@@ -20,8 +20,12 @@
   .q-icon, .q-spinner
     font-size 1.4em
   // workaround for alignment/sizing change when showing loader
-  .q-btn-inner:before
-    content ''
+  .q-btn-inner
+    transition opacity .6s
+    &--hidden
+      opacity 0
+    &:before
+      content ''
 
   &.disabled
     opacity .7 !important
@@ -108,3 +112,16 @@
 .q-btn-fab-mini
   height 40px
   width 40px
+
+.q-transition
+
+  &--fade
+
+    &-leave-active
+      position absolute
+
+  &--fade
+    &-enter-active, &-leave-active
+      transition opacity .4s ease-out
+    &-enter, &-leave, &-leave-to
+      opacity 0

src/components/btn/btn-mixin.js

@@ -20,7 +20,10 @@ export default {
   },
   props: {
     type: String,
-    loading: Boolean,
+    loading: {
+      type: Boolean,
+      default: null
+    },
     disable: Boolean,
     label: [Number, String],
     noCaps: Boolean,
@@ -135,8 +138,9 @@ export default {
     },
     innerClasses () {
       const classes = [ this.alignClass ]
-      this.noWrap && classes.push('no-wrap', 'text-no-wrap')
-      this.repeating && classes.push('non-selectable')
+      this.noWrap === true && classes.push('no-wrap', 'text-no-wrap')
+      this.repeating === true && classes.push('non-selectable')
+      this.loading === true && classes.push('q-btn-inner--hidden')
       return classes
     }
   }