feat: improve activity feed UX with reusable empty state component

[Tech4Aditya]

Related Issue

Closes #541

---

Description

This PR improves the Activity Feed UX by introducing a reusable EmptyState component for handling zero-data scenarios.

Changes Made

• Added reusable EmptyState.tsx component
• Improved loading state messaging
• Added fallback UI when no recent GitHub activity is available
• Added safer API response handling using Array.isArray(data)
• Prevented unnecessary fetch requests when username is empty

This improves overall user experience and keeps the UI more consistent and informative.

---

How Has This Been Tested?

• Verified loading state renders correctly
• Tested with valid GitHub usernames containing activity
• Tested with accounts having no recent public activity
• Confirmed no TypeScript or runtime errors after changes

---

Type of Change

• Bug fix
• New feature

Summary by CodeRabbit

• New Features
  • Enhanced loading state with a centered, styled message when fetching recent activity.
  • Improved empty state display for activity feeds with customizable titles and optional descriptions.

[netlify]

✅ Deploy Preview for github-spy ready!

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

📝 Walkthrough

Walkthrough

A new reusable EmptyState component is introduced to render styled empty-state messaging. ActivityFeed imports and uses this component to replace plain-text empty displays, while its loading state is upgraded to a centered, styled message instead of a simple paragraph.

Changes

Empty State UX Improvements

Layer / File(s)	Summary
EmptyState component definition src/components/EmptyState.tsx	New EmptyState component accepts title and optional description props, renders a centered icon with h2 title and conditional description paragraph using Tailwind dark/light mode styling.
ActivityFeed integration and loading state styling src/components/ActivityFeed.tsx	ActivityFeed imports EmptyState and uses it to render empty-event displays; loading state UI is replaced with a centered "Fetching recent activity..." message instead of inline text.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• GitMetricsLab/github_tracker#276: Main PR that updates ActivityFeed.tsx to replace plain/paragraph empty text rendering with the new EmptyState component, directly overlapping with this PR's ActivityFeed changes.

Suggested labels

level:intermediate, quality:clean, type:feature

Poem

🐰 Empty states now shine so bright,
With centered text and icons right,
No more plain text, just styled cheer,
When data's gone, the message's clear!
Reusable components, clean and neat, 🎉

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR partially addresses issue #541 by adding the EmptyState component and integrating it into ActivityFeed, but does not integrate it across all requested data-driven sections like RepositoryList, ContributionHeatmap, and followers/following.	Extend the EmptyState component integration to RepositoryList, ContributionHeatmap, and other data-driven sections as specified in issue #541 for comprehensive coverage.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	The PR mentions safer API response handling with Array.isArray(data) and preventing unnecessary fetches when username is empty, which are not explicitly covered in the linked issue #541's implementation scope.	Clarify whether API response handling and fetch prevention changes are necessary for issue #541 or represent additional improvements beyond the original scope.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: introducing a reusable empty state component to improve activity feed UX.
Description check	✅ Passed	The description follows the template structure with all required sections: Related Issue, Description, How Has This Been Tested, and Type of Change. All sections are filled with relevant details.

_{✏️ 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 @Tech4Aditya for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines

[coderabbitai]

🧹 Nitpick comments (1)

src/components/EmptyState.tsx (1)

12-12: ⚡ Quick win

Hide decorative icon from screen readers.

The emoji at Line 12 is decorative; mark it aria-hidden="true" so it isn’t announced unnecessarily.

Proposed fix

-      <div className="text-5xl mb-3">📭</div>
+      <div className="text-5xl mb-3" aria-hidden="true">📭</div>

🤖 Prompt for 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.

In `@src/components/EmptyState.tsx` at line 12, The decorative emoji in the
EmptyState component (the div with className "text-5xl mb-3") should be hidden
from screen readers; update that element to include aria-hidden="true" so the
icon is not announced to assistive technologies.

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

Nitpick comments:
In `@src/components/EmptyState.tsx`:
- Line 12: The decorative emoji in the EmptyState component (the div with
className "text-5xl mb-3") should be hidden from screen readers; update that
element to include aria-hidden="true" so the icon is not announced to assistive
technologies.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5eb184a8-18cb-487d-a9e7-6465ad33a316

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6bc3e and 508078a.

📒 Files selected for processing (2)

• src/components/ActivityFeed.tsx
• src/components/EmptyState.tsx