ShimmerMultiLine

import ShimmerMultiLine from "@wikicasa-dev/components/UIKit/ShimmerLoader/ShimmerMultiLine";

Renders lines skeleton bars stacked vertically (32px tall each, 8px apart, small radius), the usual stand-in for a block of text while it loads. Each line is a full-width BaseShimmerLoader. For a single sized block (price, image, button), use BaseShimmerLoader directly.

#Usage

<script setup lang="ts">
import ShimmerMultiLine from "@wikicasa-dev/components/UIKit/ShimmerLoader/ShimmerMultiLine";
</script>

<template>
  <section class="description">
    <h2>Descrizione dell'immobile</h2>
    <ShimmerMultiLine :lines="4" inherit-height />
  </section>
</template>

<style scoped>
.description { font-size: 16px; }
</style>

#Do / Don't

• Do use inherit-height to make each line 1em tall (follows the surrounding font-size) instead of the default 32px, so the skeleton matches body text.
• Do pick lines to match the expected text, so the height doesn't jump when content arrives.
• Don't use random-length on server-rendered pages: it picks a random right margin (0–50%) per line on every render, which causes a hydration mismatch and lines that change length on re-render. Fine in client-only mockups.
• shimmer-classes here is applied to every line box (use it for line background, height or width), unlike on BaseShimmerLoader where it targets the shine.
• :enabled="false" freezes the animation on all lines.

#Styling hooks

Each line has the class shimmer-line; style it from a parent (e.g. .description :deep(.shimmer-line) { … }) or pass classes with shimmer-classes.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
lines	number	1
randomLength	boolean	false
shimmerClasses	ClassTypeProp
inheritHeight	boolean	false
enabled	boolean	true

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

None.