vuetifyjs / vuetifyjs/vuetify

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

Open
#21,175 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VSkeletonLoader has workaround T: enhancement
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

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

https://github.com/vuetifyjs/vuetify/issues/11771#issuecomment-1494856918
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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction link and inspect the skeleton loader component implementation for how a custom height affects its animated area. Reproduce the larger-height case in Chrome, then verify that the animation fills the configured height without leaving empty space or misplaced borders.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.