[Bug Report][3.8.0-beta.0] Height of a skeleton loader can't be adjusted properly
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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