Cs 7896 try to change loading text indicator into loadingindicatoricon

[lucaslyl]

linear: https://linear.app/cardstack/issue/CS-7896/try-to-change-loading-text-indicator-into-loadingindicatoricon

Implement Skeleton Loader Component and Integrate into Card Query Loading States

• Boxel UI Component - Skeleton Placeholder: Added a reusable Skeleton component to display placeholder content during loading states.
• Skeleton Loader Animations: Implemented three animation types for the Skeleton Loader: wave, pulse, and none.
• CSS Variable Controls: Added support for customizable properties via CSS variables: width, height, border-radius, background color, and highlight color.
• Integration: Applied the Skeleton Loader to all card query loading states to improve user experience during data fetching.

Demo in Boxel Ui:

Screen.Recording.2025-02-17.at.11.40.45.mov

Result in CRM Account:

[github-actions]

Host Test Results

    1 files  ±0      1 suites  ±0   23m 42s ⏱️ +18s
764 tests ±0  761 ✔️ ±0  3 💤 ±0  0 ❌ ±0 
769 runs  ±0  766 ✔️ ±0  3 💤 ±0  0 ❌ ±0 

Results for commit a842f83. ± Comparison against base commit 58676fa.

♻️ This comment has been updated with latest results.