Add Loading Skeletons to Dashboard

[jpdevhub]

The dashboard and map currently use standard spinners or 'Loading...' text. Replace these with modern Skeleton loaders (shimmer effects) for the farm cards, weather widget, and market prices so the UI feels faster and more premium.

[github-actions]

👋 Thanks for opening this issue, @jpdevhub!

We'll take a look soon. In the meantime, please make sure you've included steps to reproduce (for bugs) or a clear problem statement (for feature requests).

— The AgroNavis team

[Tirthpanchori]

hey @jpdevhub, i would like to work on this issue. It's pretty straightforward and pure frontend, would highly appreciate if you assign it to me. Thank you!

[onkar0127]

Modern Skeleton Loaders & Shimmer UX

Hi @jpdevhub

I would like to work on optimizing the dashboard loading transitions by introducing modern Skeleton Loaders (shimmer effects). This will replace the basic text/spinners and significantly improve visual performance.

Please assign this issue to me under SSOC. Below is the detailed implementation plan:

---

📋 Implementation Details

1. CSS Shimmer Animation

Create a hardware-accelerated shimmer effect inside the component style modules:

• Add style definitions inside Dashboard.module.css and WeatherWidget.module.css:

  .skeleton {
    position: relative;
    overflow: hidden;
    background-color: #f1f5f9; /* Slate-100 placeholder bg */
    border-radius: 8px;
  }
  
  .skeleton::after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 20%,
      rgba(255, 255, 255, 0.6) 60%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.6s infinite;
    content: '';
  }
  
  @keyframes shimmer {
    100% { transform: translateX(100%); }
  }

2. Farm Cards Loading State in Dashboard.tsx

• Replace the current loading card spinner block with a grid layout representing the skeleton placeholder of active cultivations.
• Recreate the cards structure layout containing:
  • Header image shimmer block (height: 140px).
  • Title and soil type badge skeleton shapes.
  • A 3-column NPK metric container with square skeleton boxes.
  • Footer placeholder tags.

3. Crops Loading State in Dashboard.tsx

• Construct a dedicated crop list skeleton with card slots matching layout segments (variety, sowing/harvest dates, growth stage).

4. Weather Widget Loader in WeatherBlock.tsx

• Swap the classic loading text overlay with a card skeleton layout matching the active weather card layout:
  • Header rows for the city name and date string.
  • Central temperature circular/text placeholder.
  • Detail rows representing humidity and wind metrics.

5. Market Price Widget loading state in MarketPriceWidget.tsx

• Simulate dynamic fetching state by introducing React state triggers (useState and useEffect with a mock timer) to demonstrate the shimmering layout before mounting prices.
• Render horizontal rows showing shimmering blocks representing crops name and prices.

6. Leaflet Map Dynamic Fallback in Dashboard.tsx

• Transition the PolygonMapper dynamic loading component fallback from a text spinner to a rectangular shimmer map container (height: 600px).

---

📂 Affected Files

• Dashboard.tsx
• WeatherBlock.tsx
• MarketPriceWidget.tsx
• Dashboard.module.css
• WeatherWidget.module.css

[arcgod-design]

Hi @jpdevhub! I'd love to work on this as part of SSoC '26.

My Approach:

• Replace current spinners/"Loading..." text with shimmer skeleton components for farm cards, weather widget, and market prices using a lightweight CSS animation
• Create reusable <SkeletonCard /> and <SkeletonWidget /> components that match the exact dimensions of their loaded counterparts to prevent layout shift
• Integrate with existing data-fetching hooks so skeletons show during loading state and transition smoothly to real content
• Ensure compatibility across dark/light themes

Could you please assign this to me (@arcgod-design)? Thank you!

[jpdevhub]

@arcgod-design go ahead

[Itsssaksham]

can you assign this issue to me ?