Add skeleton loaders and empty state handling to tracker dashboard

[priya434960]

Related Issue

• Closes: Tracker Dashboard Feels Unresponsive During Data Fetch — Add Skeleton UI and Empty States #534

---

Description

Implemented improved loading and empty-state UI for the tracker dashboard.

How Has This Been Tested?

-Tested locally on localhost
-Verified Skeleton loader appears during data fetch
-Verified empty-state message appears correctly
-Verified tracker page still works normally

Screenshots

---

Type of Change

• Bug fix

Summary by CodeRabbit

• New Features
  • Enhanced loading experience with skeleton placeholder rows providing better visual feedback during data fetch, replacing the previous spinner interface.
  • Added empty state notification displaying a message when no GitHub activity matches the currently applied filter criteria.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	7b08c26
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a167f162450af00082a990b
😎 Deploy Preview	https://deploy-preview-559--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Review limit reached

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

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

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ 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.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3842a9ae-d5d7-4cb4-8f3c-38d4856f434f

📥 Commits

Reviewing files that changed from the base of the PR and between fe47d63 and 7b08c26.

📒 Files selected for processing (1)

• src/pages/Tracker/Tracker.tsx

📝 Walkthrough

Walkthrough

The Tracker component now provides visual feedback during data loading and when no results are found. A MUI Skeleton import is added, the loading state renders animated skeleton rows instead of a centered spinner, and an empty-state message appears when the filtered dataset is empty.

Changes

Loading and Empty-State UX Improvements

Layer / File(s)	Summary
Loading and empty-state UI src/pages/Tracker/Tracker.tsx	Skeleton import is added; loading state renders multiple stacked skeleton rows for visual feedback instead of a blank spinner; empty table displays a "No Github activity found with current filters." row when no data matches the current filters.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• #534: Tracker Dashboard Feels Unresponsive During Data Fetch — Add Skeleton UI and Empty States. This PR directly implements the skeleton loader placeholders and empty-state message improvements described in the issue.

Possibly related PRs

• GitMetricsLab/github_tracker#246: Both PRs modify src/pages/Tracker/Tracker.tsx to replace the loading spinner with MUI Skeleton-based skeleton table rows.
• GitMetricsLab/github_tracker#242: Both PRs modify src/pages/Tracker/Tracker.tsx to replace the loading CircularProgress spinner with Skeleton placeholders and add empty-state rendering.

Suggested labels

level:intermediate, quality:clean

Poem

🐰 A spinner once spun, now skeletons dance,
Placeholders shimmer while data takes chance,
Empty states whisper with grace and with care,
"No activity here, but we're standing right there!"
The dashboard feels swift, responsive and bright,
Loading feels lighter—the UX feels right! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main changes: adding skeleton loaders and empty state handling to the tracker dashboard, which aligns with the core modifications in the PR.
Description check	✅ Passed	The description follows the template structure with all required sections (Related Issue, Description, How Has This Been Tested, Screenshots, Type of Change) mostly complete, though some minor formatting issues exist.
Linked Issues check	✅ Passed	The PR successfully implements the requirements from issue #534: skeleton loaders for loading states, empty-state message ('No Github activity found with current filters'), improved visual feedback, and responsive UX for the tracker dashboard.
Out of Scope Changes check	✅ Passed	All changes are focused on frontend UX improvements for loading and empty states in the Tracker component, staying within the scope defined by issue #534 with no unrelated modifications.
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 and usage tips.}

[github-actions]

🎉 Thank you @priya434960 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@src/pages/Tracker/Tracker.tsx`:
- Line 376: The empty-state message in the Tracker component contains incorrect
product casing: replace the string "No Github activity found with current
filters." with "No GitHub activity found with current filters." in the
JSX/return of the Tracker component (look for the exact literal in Tracker.tsx)
so user-facing copy uses the official "GitHub" casing.
- Around line 373-379: The empty-state message is shown based only on
currentFilteredData.length === 0; update the condition to also require that a
fetch has been executed (e.g., check a "hasFetched" or similar flag) so the
message only displays after at least one fetch completes; if no flag exists, add
a local state like hasFetched in the Tracker component (set it true when the
fetch action or the function that loads data completes) and change the render
condition around the TableRow/TableCell to currentFilteredData.length === 0 &&
hasFetched (or equivalent) to avoid showing the message on initial load.

🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8cbb99c2-e3ee-4bbd-8b44-46c19493a2dd

📥 Commits

Reviewing files that changed from the base of the PR and between 4ae0ef6 and fe47d63.

📒 Files selected for processing (1)

• src/pages/Tracker/Tracker.tsx

[priya434960]

Hi, I have addressed the review comments and pushed the required fixes. If there are any additional changes needed, please let me know. Thank you!