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.

Global Variables

: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%;
}

Fallback Chain

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)

Components Using Shimmer

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

Customization

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

: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.