[Feature]: Add Skeleton Loading States for All Dashboard Cards

[ErebAsh]

• closes [Feature]: Add Skeleton Loading States for All Dashboard Cards #85

Description

This PR upgrades the initial loading experience of the application.

Previously, while live AQI data was fetching, users would stare at a static text message ("Preparing live pollution intelligence...") and an empty screen, leading to a jarring layout shift once the data arrived.

To provide a more polished, premium feel, we have implemented an animated skeleton placeholder system (shimmer effect). The skeletons exactly mirror the layout, dimensions, and padding of the actual dashboard cards, completely eliminating layout shifts and providing users with immediate visual feedback on what content is about to load.

Key Changes

• Base Skeleton Component (Skeleton.jsx):
  • Created a lightweight, reusable component for rendering base skeleton blocks.
• Skeleton Dashboard (SkeletonDashboard.jsx):
  • Built a composite placeholder component that flawlessly mimics the grid layout of the real dashboard, including the AQI gauge, trend charts, map container, and alerts panel.
• Pure CSS Shimmer Animation (styles.css):
  • Implemented the shimmer effect using a pure CSS linear-gradient and @keyframes animation on pseudo-elements, requiring zero external libraries.
  • Added native dark mode support (data-theme="dark"), gracefully adapting the shimmer opacity for darker themes.
• Graceful Transitions (App.jsx):
  • Updated the loading state to render the Hero component immediately alongside the SkeletonDashboard.
  • Because the underlying .panel class utilizes a rise-in animation, the transition from the skeleton state to the live data is buttery smooth with no jarring flashes.

Testing Instructions

1. Network Throttling: Open DevTools Network tab and set the throttling to "Slow 3G". Reload the page.
2. Visual Check: Observe the layout of the skeleton cards. They should perfectly align with the dimensions of the actual components once the data loads (zero layout shift).
3. Theme Check: Toggle Dark Mode while the skeletons are visible (or before refreshing) to ensure the shimmer gradient gracefully adapts its opacity.

Impact

Significantly improves the perceived performance and overall user experience during initial data fetching, creating a premium feel and eliminating CLS (Cumulative Layout Shift).

[vercel]

@ErebAsh is attempting to deploy a commit to the Aditya Mahajan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[ErebAsh]

Screen.Recording.2026-07-09.135506.mp4

[ErebAsh]

@Aditya8369 please review now

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pollution-control-hub	Ready	Preview, Comment	Jul 9, 2026 6:03pm

[github-actions]

🎉 Your PR just got merged, @ErebAsh — thank you for contributing to Pollution Control Hub!

Your work is now part of the project. Here's what to do next:

• ⭐ If you haven't already, consider giving the repo a star — it helps us grow.
• 📢 Share your contribution on LinkedIn, Twitter, or wherever you hang out. You shipped open source!
• 🔍 Browse other open issues if you want to keep contributing.

We really appreciate you taking the time. See you in the next PR! 🚀