CastPromo

Shimmer Effect System

The application uses a standardized shimmer effect system for loading states, controlled through CSS custom properties with the nimbl-sys prefix. This system ensures consistent loading animations across all components.

$3

``css
:root {
/ Colors /
--nimbl-sys-shimmer-color-start: var(--md-sys-color-surface, transparent);
--nimbl-sys-shimmer-color-middle: var(
--md-sys-color-surface-variant,
#e0e0e0
);
--nimbl-sys-shimmer-color-end: var(
--nimbl-sys-shimmer-color-start,
transparent
);
--nimbl-sys-shimmer-base-color: var(
--md-sys-color-surface-container,
#f5f5f5
);
--nimbl-sys-shimmer-item-color: var(--md-sys-color-outline, #e0e0e0);

/ Animation /
--nimbl-sys-shimmer-duration: 1.2s;
--nimbl-sys-shimmer-timing: linear;
--nimbl-sys-shimmer-iteration: infinite;
--nimbl-sys-shimmer-background-size: 250% 100%;
}
`

$3

The shimmer system follows a three-level fallback chain:

1. nimbl-sys variables (if defined)
2. Material Design md-sys variables (if nimbl-sys not defined)
3. Hardcoded values (if neither defined)

$3

- episode-item: Loading state for episode cards
- podcast-result-item: Loading state for podcast search results
- lazy-image: Loading state for images

$3

To override shimmer effects globally, set the nimbl-sys variables in your CSS. For example:

`css
:root {
--nimbl-sys-shimmer-color-middle: #your-color;
--nimbl-sys-shimmer-duration: 2s;
}
``

The shimmer animation uses background-position for consistent velocity across different element widths.