[Bug Report][3.8.0-beta.0] Height of a skeleton loader can't be adjusted properly

[kschwedler]

Environment

Vuetify Version: 3.8.0-beta.0
Vue Version: 3.5.13
Browsers: Chrome 134.0.0.0
OS: Windows 10

Steps to reproduce

Select a skeleton loader and change the height so it's bigger than the loader's default

Expected Behavior

The loader adjusts it's content (the loader itself) to match the given height

Actual Behavior

The loader adjusts it's size, but the height of the animation part stays the same (made visible in the reproduction link with borders). There is empty room or a border over/under the skeleton loader.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

#11771 (comment)
Johnleider wrote that the v3's implementation is taking another approach but either I'm blind or there is no way of changing this unwanted behaviour.
I aware that the values are configurable via sass variables but why is it not possible to override them with props? Not every usage of the image loader has the same height.

[MatthewAry]

So I would consider this a flaw of the skeleton loader. It has a bunch of generic template loader combinations, but lacks a good experience to specify specific layouts and designs that you're looking for. I personally rolled my own skeleton loader component that just lets me specify the size and shape properties the way I wanted it in my own project.

<script setup lang="ts">
import type { StyleValue } from 'vue'
import type { VSheet } from 'vuetify/components'

defineOptions({
  inheritAttrs: false
})

const props = withDefaults(defineProps<{
  loading?: boolean | undefined
  tag?: string | undefined
  rounded?: string | number | boolean | undefined
  tile?: boolean | undefined
  theme?: string | undefined
  position?: 'fixed' | 'absolute' | 'relative' | 'static' | 'sticky' | undefined
  elevation?: string | number | undefined
  height?: string | number | undefined
  maxHeight?: string | number | undefined
  maxWidth?: string | number | undefined
  minHeight?: string | number | undefined
  minWidth?: string | number | undefined
  width?: string | number | undefined
  border?: string | number | boolean | undefined
  color?: string | undefined
  boilerplate?: boolean | undefined
}>(), {
  loading: true,
  height: 24,
  width: '100%'
})

// Compute styles
const styles = computed(() => {
  const styles: StyleValue = {}
  // If rounded is a number, convert it to px
  if (typeof props.rounded === 'number') {
    styles.borderRadius = `${props.rounded}px`
  }
  return styles
})
</script>

<template>
  <div
    v-if="loading"
    :class="{ boilerplate }"
    class="my-skeleton-loader"
    aria-label="Loading..."
    role="alert"
    aria-live="polite"
    v-bind="$attrs"
  >
    <VSheet class="v-skeleton-loader__bone" v-bind="props" :style="styles" />
  </div>
  <slot v-else-if="$slots.default" />
</template>

<style scoped lang="scss">
.my-skeleton-loader {
  position: relative;
  .v-skeleton-loader__bone {
    align-items: center;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    background: rgba(var(--v-theme-on-surface), var(--v-border-opacity));
  }

  &:not(.boilerplate) {
    .v-skeleton-loader__bone {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: loading 1.5s infinite;
        background: linear-gradient(
          90deg,
          rgba(var(--v-theme-surface), 0),
          rgba(var(--v-theme-surface), 0.3),
          rgba(var(--v-theme-surface), 0)
        );
        transform: translateX(-100%);
        z-index: 1;
      }
    }
  }
}
@keyframes loading {
  100% {
    transform: translateX(100%);
  }
}

But I think it would have been great if it wasn't necessary for me to do that. Right now the VSkeleton loader is too tightly coupled with the CSS of each different loader type to give you the flexibility you're looking for. I think the type prop should be made optional and we should be able to define arbitrary shapes with width, height and rounded/border with its absence.