Proposal: New Loader Component with Multiple Animation Types

[prince272]

Background

In PR #42, I added new animation variants (rotate, sweep, dots, wave) to the existing Spinner component and tested them across sizes and colors. The default remains rotate.

During review, two main issues were raised:

• Design System Alignment: The design system (Figma + documentation) has not defined these new spinner styles yet, so introducing them under Spinner may conflict with existing design conventions.
• Component Architecture: There is interest in keeping Spinner minimal, and using a separate component (e.g. Loader) that is responsible for more expressive or contextual loading animations. This helps maintain separation of concerns.

---

💡 Proposal

Create a new component: Loader

Purpose

• Encapsulate different styles of loading / loading animations
• Serve as the home for expressive or contextual loading indicators
• Allow Spinner to remain simple, supporting only the standard rotate style (or a minimal set aligned with the design system)

---

🚀 Suggested API / Variants

<Loader variant="rotate" size="sm|md|lg" color="…" />
<Loader variant="sweep" … />
<Loader variant="dots" … />
<Loader variant="wave" … />

Supported variants:

• rotate (default)
• sweep
• dots
• wave

---

📐 Design / Documentation

• Align with the Design team to add these styles to the design system (Figma + docs)
• Define rules for sizes, spacing, and usage contexts:
  • Button loaders
  • Full-page loaders
  • Inline loaders
  • Background fetch indicators

---

🔄 Migration / Backwards Compatibility

• Spinner can continue to support only the rotate style.
• For existing components, I will provide a migration path to Loader without breaking changes.