feat: add shimmer skeleton loaders for dashboard (closes #48)

[arcgod-design]

Summary

Replaces standard spinners and 'Loading...' text with modern shimmer skeleton loaders for farm cards, weather widget, market prices, and map — making the UI feel faster and more premium.

Changes

New Files

• **rontend/src/components/Skeleton.tsx** — Reusable skeleton components: FarmCardSkeleton, CropCardSkeleton, WeatherSkeleton, MarketPriceSkeleton, MapSkeleton
• **rontend/src/styles/Skeleton.module.css** — Shimmer animation with prefers-reduced-motion support

Modified Files

• Dashboard.tsx — Replaced spinners with skeletons for farms tab, crops tab, and map loading
• WeatherBlock.tsx — Replaced spinner with WeatherSkeleton
• MarketPriceWidget.tsx — Added loading state with shimmer skeleton
• Dashboard.module.css — Added .cropListSkeleton class

Before / After

Location	Before	After
Farms tab	CSS spinner + text	3 FarmCardSkeleton cards with shimmer
Crops tab	CSS spinner + text	3 CropCardSkeleton cards with shimmer
Map	CSS spinner + text	Full-height MapSkeleton with shimmer
Weather widget	CSS spinner + text	WeatherSkeleton matching real layout
Market prices	No loading state	4-row MarketPriceSkeleton with shimmer

Features

• Hardware-accelerated CSS shimmer animation (no JS)
• Matches exact dimensions of loaded components (no layout shift)
• Respects prefers-reduced-motion for accessibility
• Zero new dependencies

Closes #48

Summary by CodeRabbit

• New Features
  • Introduced skeleton loading placeholders across all dashboard sections—farms, crops, market prices, weather information, and maps—replacing generic spinners and loading text with visually representative placeholders.
  • Added shimmer animation effects to skeleton loaders with built-in accessibility support for reduced-motion preferences.

[vercel]

Someone is attempting to deploy a commit to the karan3431's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thanks for your contribution, @arcgod-design!

Please make sure CI passes and the checklist in the PR template is complete. A maintainer will review this soon.

— The AgroNavis team

[coderabbitai]

Warning

Review limit reached

@arcgod-design, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 10 minutes and 23 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses rolling per-developer review limits. Reviews become available again as older review attempts age out of the rolling limit window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e918e7bd-d456-4745-91ba-ee0a3e333b76

📥 Commits

Reviewing files that changed from the base of the PR and between 58b89c0 and 3374dfc.

📒 Files selected for processing (5)

• frontend/src/components/Dashboard.tsx
• frontend/src/components/MarketPriceWidget.tsx
• frontend/src/components/Skeleton.tsx
• frontend/src/styles/Dashboard.module.css
• frontend/src/styles/Skeleton.module.css

📝 Walkthrough

Walkthrough

Introduces a new Skeleton.tsx component file and Skeleton.module.css stylesheet providing a base shimmer skeleton and five composed variants. Existing loading states in Dashboard, WeatherBlock, and MarketPriceWidget are replaced with these skeleton components; MarketPriceWidget gains a new 800ms useEffect-driven loading state.

Changes

Skeleton Loading System

Layer / File(s)	Summary
Base Skeleton component and CSS frontend/src/components/Skeleton.tsx, frontend/src/styles/Skeleton.module.css	New Skeleton.tsx exports a parameterized base Skeleton and five composed variants: FarmCardSkeleton, CropCardSkeleton, WeatherSkeleton, MarketPriceSkeleton, MapSkeleton. Skeleton.module.css defines all component layout classes, the shimmer keyframe animation with ::after overlay, and a prefers-reduced-motion override that disables shimmer.
Dashboard skeleton integration frontend/src/components/Dashboard.tsx, frontend/src/styles/Dashboard.module.css	Imports FarmCardSkeleton, CropCardSkeleton, and MapSkeleton. Replaces spinner-based loading in the "My Farms" tab with a farmsGrid of three FarmCardSkeleton items, in the "My Crops" tab with a cropListSkeleton of three CropCardSkeleton items, and in PolygonMapper with <MapSkeleton />. Adds the .cropListSkeleton flex column layout to Dashboard.module.css.
WeatherBlock and MarketPriceWidget skeleton integration frontend/src/components/WeatherBlock.tsx, frontend/src/components/MarketPriceWidget.tsx	WeatherBlock replaces its inline loading container/spinner markup with a single <WeatherSkeleton />. MarketPriceWidget adds useState/useEffect hooks with an 800ms timer to drive a loading state, returning <MarketPriceSkeleton /> while loading.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

Medium, SSoC26

Suggested reviewers

• JainamDedhia
• jpdevhub

Poem

🐰 Hop hop, the spinners are gone today,
Shimmer and gleam now lead the way!
Farm cards, crop lists, weather too—
Each placeholder shines with a silvery hue.
The rabbit says loading never looked so fine,
Skeletons dancing in a neat little line! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding shimmer skeleton loaders to the dashboard and references the linked issue #48.
Linked Issues check	✅ Passed	The PR fully implements the requirements from issue #48: skeleton loaders with shimmer effects for farm cards, weather widget, market prices, and map, enhancing perceived performance without new dependencies.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the linked issue #48 objectives. New skeleton components, styling, and integrations into Dashboard, WeatherBlock, and MarketPriceWidget are all within scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/MarketPriceWidget.tsx`:
- Around line 12-21: The useEffect hook in the MarketPriceWidget component
unconditionally sets a 800ms timer delay before transitioning from the skeleton
state, adding unnecessary latency regardless of when actual data is available.
Remove the setTimeout that creates this artificial delay and instead tie the
loading state directly to actual data fetching operations. The skeleton should
only display while data is genuinely being loaded, not for a fixed duration.

In `@frontend/src/styles/Dashboard.module.css`:
- Line 1072: The CSS selector `.cropListSkeleton` in Dashboard.module.css
violates the stylelint selector-class-pattern rule which requires kebab-case
naming. Rename the class selector `.cropListSkeleton` to `.crop-list-skeleton`
in the CSS file, and then update all corresponding references to this class in
the Dashboard.tsx component (or any other component files) that use this class
name to use the new kebab-case format to maintain consistency with the enforced
style rules.

In `@frontend/src/styles/Skeleton.module.css`:
- Around line 32-39: The CSS class selectors in Skeleton.module.css are using
camelCase naming (such as `.farmCardSkeleton` and `.farmCardImageSkeleton`)
which violates the configured `selector-class-pattern` stylelint rule that
requires kebab-case. Convert all class selectors in this file from camelCase to
kebab-case format (for example, change `.farmCardSkeleton` to
`.farm-card-skeleton`, `.farmCardImageSkeleton` to `.farm-card-image-skeleton`,
and apply the same pattern to all other selectors listed in the comment). Then
update all corresponding references in Skeleton.tsx where these styles are
accessed through the imported `styles` object to use the new kebab-case names
instead of camelCase.
- Around line 10-13: The Skeleton.module.css file contains stylelint violations
that need to be fixed. Replace the longhand inset property declarations (top,
left, right, bottom all set to 0) with the shorthand inset property (inset: 0).
Additionally, review all color function declarations and alpha value notations
throughout the file (including the locations at lines 15-21, 36, 49-52, 54-60,
90, and 102) to ensure they comply with the project's stylelint rules for
color-function format and alpha-value-notation. Convert rgba() functions and
decimal alpha values to the format expected by your stylelint configuration
(likely modern CSS color syntax with space-separated values and percentage-based
alpha).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 157d2bba-9a41-47d4-a899-515a1ac879bc

📥 Commits

Reviewing files that changed from the base of the PR and between 1f5879f and 58b89c0.

📒 Files selected for processing (6)

• frontend/src/components/Dashboard.tsx
• frontend/src/components/MarketPriceWidget.tsx
• frontend/src/components/Skeleton.tsx
• frontend/src/components/WeatherBlock.tsx
• frontend/src/styles/Dashboard.module.css
• frontend/src/styles/Skeleton.module.css