Description
🛠 Description
Optimize the animated loading spinner GIF used in the Spinner component. This ensures faster rendering, improved performance on slower connections, and better delivery across browsers and devices. Cloudinary’s f_auto and q_auto can help deliver a more efficient version of the GIF or a browser-optimized alternative (like animated WebP or AVIF), reducing the time-to-interactive.
⸻
✅ Acceptance Criteria
• The GIF URL is updated with Cloudinary transformations including f_auto, q_auto:good, dpr_auto, and c_limit.
• The image loads and animates correctly across all supported browsers.
• No flickering, quality drop, or animation issues are introduced.
• The spinner container (tw-h-10 tw-w-10) maintains proper layout and style.
• The new URL is committed and reviewed without regressions in UX or performance.
⸻
📋 Implementation Notes
Replace this line:
src="https://res.cloudinary.com/vetswhocode/image/upload/v1627489505/vwc_kym0qt.gif"
With:
Explanation of Parameters:
• f_auto: Delivers the best format (webp/avif) if the browser supports it, or falls back to GIF.
• q_auto:good: Compresses with a balance of speed and clarity.
• dpr_auto: Improves sharpness on high-DPI screens.
• c_limit,w_40: Matches the container dimensions to avoid sending extra pixels.
⸻
🔗 Related Issues or PRs
• Cloudinary Docs – Animated GIF Optimization
• N/A (create GitHub Issue if necessary)
⸻