Enhance dashboard UX with loading skeletons and empty states

[yChandrakala23]

Related Issue

• Closes: #<240>

---

Description

This PR enhances the dashboard user experience by replacing the basic loading spinner (CircularSpinner) with responsive skeleton loaders and improving empty-state handling for better visual feedback.

Changes Made:

• Added loading skeletons for dashboard tables
• Improved empty-state UI when no GitHub data is available
• Enhanced overall dashboard responsiveness and UX consistency
• Maintained compatibility across light and dark modes

---

How Has This Been Tested?

• Tested loading skeleton rendering during API fetch
• Verified empty-State UI by using unavailable/No data
• Checked responsiveness across different screen sizes
• Confirmed proper functionality in both light and dark modes

---

Screenshots (if applicable)

Before:

After changes:

---

Type of Change

• Enhancement

• UI/UX Improvement

• Bug fix

• New feature

• Code style update

• Breaking change

• Documentation update

Summary by CodeRabbit

• Improvements
  • The loading state now displays a skeleton table with placeholder rows instead of a spinner, providing clearer visual feedback about the data structure being loaded.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	d82cfce
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a06ab170c8c460008836a98
😎 Deploy Preview	https://deploy-preview-242--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

Rate limit exceeded

@yChandrakala23 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 22 minutes and 21 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ff71d7a4-79b8-436d-a84b-645d7bf4b1f0

📥 Commits

Reviewing files that changed from the base of the PR and between 77a74e0 and d82cfce.

📒 Files selected for processing (1)

• src/pages/Tracker/Tracker.tsx

📝 Walkthrough

Walkthrough

Tracker component's loading state UI transitions from a centered spinner to a scrollable table skeleton. Material UI imports swap CircularProgress for Skeleton and Typography. The loading branch renders five placeholder rows with skeleton cells matching the table structure.

Changes

Loading skeleton UI implementation

Layer / File(s)	Summary
Loading skeleton UI with imports src/pages/Tracker/Tracker.tsx	@mui/material imports are updated to remove CircularProgress and add Skeleton and Typography. The loading render path is refactored to display a scrollable table-shaped skeleton with 5 placeholder rows containing skeleton cells, replacing the previous centered spinner.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A spinner once spun round and round,
But skeletons came without sound—
Five rows await, all dressed in gray,
While data loads throughout the day. 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: replacing loading spinners with skeleton loaders and improving empty-state UX, which aligns with the file-level changes and PR objectives.
Description check	✅ Passed	The description is comprehensive and follows the template structure with all required sections completed: Related Issue, Description with detailed changes, testing methodology, screenshots, and type of change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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 @yChandrakala23 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: 1

🤖 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`:
- Around line 320-335: The "No Data Found" empty-state is being rendered even
when authError or dataError exist; update the conditional that renders the
Paper/ Typography "No Data Found" block so it only renders when there is no
error (i.e., guard with !authError && !dataError). Locate the JSX that renders
the Paper with "No Data Found" in Tracker (Tracker.tsx) and wrap or replace its
render condition to check the error flags before showing the empty state; keep
existing content/styles but ensure authError or dataError short-circuit this
branch.

🪄 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: 9d9f95f4-34f1-4964-817b-f779aad4b412

📥 Commits

Reviewing files that changed from the base of the PR and between 56e17a3 and 77a74e0.

📒 Files selected for processing (1)

• src/pages/Tracker/Tracker.tsx