BaseShimmerLoader

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

A skeleton placeholder: a lavender block with a light sweep animated across it. It has no size of its own, so you give it the size and radius of the thing it replaces (a price, a title line, an image). Render it with v-if while loading and swap in the real content with v-else.

For several stacked text lines use ShimmerMultiLine. For a spinner inside a button or small inline wait, use StaticSpinner.

#Usage

<script setup lang="ts">
import { ref } from "vue";
import BaseShimmerLoader from "@wikicasa-dev/components/UIKit/ShimmerLoader/BaseShimmerLoader";

const loading = ref(true);
const price = "€ 245.000";
</script>

<template>
  <div class="valuation">
    <span>Prezzo stimato</span>
    <BaseShimmerLoader v-if="loading" class="price-skeleton" />
    <strong v-else>{{ price }}</strong>
  </div>
</template>

<style scoped>
.price-skeleton { width: 120px; height: 30px; border-radius: 8px; }
</style>

#Do / Don't

• Do always size it (width, height) and round it (border-radius) through class or style; without a height it collapses to nothing.
• Do match the size of the final content so nothing jumps when it arrives. For an inline value inside text, add display: inline-block.
• Do set :enabled="false" to freeze the shine (e.g. many skeletons off screen, or reduced-motion).
• Don't use it as a translucent overlay on top of real content: the block is opaque. Default slot content is rendered inside the block, under the shine.
• shimmer-classes styles the moving shine layer only, not the block.

#Styling hooks

• The block's lavender background is a library utility class on the root; to recolor it, use a selector stronger than one class or !important (e.g. background-color: rgb(var(--uikit-color-w-cultured)) !important).
• The shine layer has the class shimmer (and data-enabled while animating).

#API

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

Props

Name	Type	Default	Required	Description
shimmerClasses	ClassTypeProp	""
enabled	boolean	true

Events

None.

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.