feat(loaders): improve loading styles for table and cards

vuetifyjs · Jun 7, 2020 · c2c1d6a · c2c1d6a
1 parent d634514
commit c2c1d6a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -22,17 +22,20 @@ import VBtn from '../VBtn'
 import VDataTableHeader from './VDataTableHeader'
 // import VVirtualTable from './VVirtualTable'
 import VIcon from '../VIcon'
-import VProgressLinear from '../VProgressLinear'
 import Row from './Row'
 import RowGroup from './RowGroup'
 import VSimpleCheckbox from '../VCheckbox/VSimpleCheckbox'
 import VSimpleTable from './VSimpleTable'
 import MobileRow from './MobileRow'
 
+// Mixins
+import Loadable from '../../mixins/loadable'
+
 // Directives
 import ripple from '../../directives/ripple'
 
 // Helpers
+import mixins from '../../util/mixins'
 import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, defaultFilter, camelizeObjectKeys, getPropertyFromItem } from '../../util/helpers'
 import { breaking } from '../../util/console'
 import { mergeClasses } from '../../util/mergeData'
@@ -68,7 +71,10 @@ function searchTableItems (
 }
 
 /* @vue/component */
-export default VDataIterator.extend({
+export default mixins(
+  VDataIterator,
+  Loadable,
+).extend({
   name: 'v-data-table',
 
   // https://github.com/vuejs/vue/issues/6872
@@ -106,6 +112,10 @@ export default VDataIterator.extend({
       type: [String, Function] as PropType<RowClassFunction | string>,
       default: () => '',
     },
+    loaderHeight: {
+      type: [Number, String],
+      default: 4,
+    },
   },
 
   data () {
@@ -233,18 +243,10 @@ export default VDataIterator.extend({
       }))
     },
     genLoading () {
-      const progress = this.$slots['progress'] ? this.$slots.progress : this.$createElement(VProgressLinear, {
-        props: {
-          color: this.loading === true ? 'primary' : this.loading,
-          height: 2,
-          indeterminate: true,
-        },
-      })
-
       const th = this.$createElement('th', {
         staticClass: 'column',
         attrs: this.colspanAttrs,
-      }, [progress])
+      }, [this.genProgress()])
 
       const tr = this.$createElement('tr', {
         staticClass: 'v-data-table__progress',

diff --git a/packages/vuetify/src/components/VDataTable/VSimpleTable.sass b/packages/vuetify/src/components/VDataTable/VSimpleTable.sass
@@ -88,7 +88,7 @@
   height: auto !important
 
   .v-progress-linear
-    position: absolute
+    +radius($data-table-progress-border-radius)
 
   th
     height: auto !important

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -6968,8 +6968,8 @@ exports[`VDataTable.ts should render loading state 1`] = `
             <div role="progressbar"
                  aria-valuemin="0"
                  aria-valuemax="100"
-                 class="v-progress-linear v-progress-linear--reverse theme--light"
-                 style="height: 2px;"
+                 class="v-progress-linear v-progress-linear--absolute v-progress-linear--reverse theme--light"
+                 style="height: 4px;"
             >
               <div class="v-progress-linear__background primary"
                    style="opacity: 0.3; right: 0%; width: 100%;"

diff --git a/packages/vuetify/src/components/VDataTable/_variables.scss b/packages/vuetify/src/components/VDataTable/_variables.scss
@@ -13,6 +13,7 @@ $data-table-header-sort-badge-min-width: 18px !default;
 $data-table-header-sort-badge-width: 18px !default;
 $data-table-mobile-row-header-font-weight: 600 !default;
 $data-table-mobile-row-min-height: 48px !default;
+$data-table-progress-border-radius: $data-table-border-radius $data-table-border-radius 0 0 !default;
 $data-table-regular-header-height: 48px !default;
 $data-table-regular-row-height: 48px !default;
 $data-table-row-group-children-td-height: 35px !default;