Skip to content

Commit e48f3e0

Browse files
authored
improve: enhance contributors loading state accessibility and feedback (JhaSourav07#2056)
## Summary This PR improves the Contributors page loading experience by enhancing the existing loading state with better accessibility support and additional user feedback. ## Changes Made * Added `role="status"` to improve screen reader support. * Added `aria-live="polite"` to announce loading updates to assistive technologies. * Added a visually hidden (`sr-only`) loading message for accessibility. * Added an additional helper message informing users that contributor data is being fetched from GitHub. * Preserved the existing loading spinner and functionality. ## Benefits * Improves accessibility for users relying on screen readers. * Provides clearer feedback while contributor data is loading. * Enhances the overall user experience during network requests. * Makes the loading state more informative and user-friendly. ## Testing * Verified that the loading screen renders correctly. * Verified that the spinner animation remains unchanged. * Verified that additional loading messages are displayed properly. * Confirmed that contributor data loads as expected once fetching is complete. Closes JhaSourav07#2010
2 parents 50ad8e6 + 4d83e7b commit e48f3e0

1 file changed

Lines changed: 8 additions & 3 deletions

File tree

app/contributors/loading.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
export default function Loading() {
22
return (
3-
<div className="flex min-h-screen items-center justify-center bg-white text-black dark:bg-black dark:text-white transition-colors">
4-
<div className="flex flex-col items-center gap-4">
3+
<div className="flex min-h-screen items-center justify-center bg-white text-black transition-colors dark:bg-black dark:text-white">
4+
<div className="flex flex-col items-center gap-4" role="status" aria-live="polite">
55
<div className="h-14 w-14 animate-spin rounded-full border-4 border-cyan-400 border-t-transparent" />
6-
<p className="text-zinc-500 dark:text-zinc-400">Loading contributors...</p>{' '}
6+
7+
<p className="text-zinc-500 dark:text-zinc-400">Loading contributors...</p>
8+
9+
<p className="text-sm text-zinc-400 dark:text-zinc-500">
10+
Fetching contributor data from GitHub
11+
</p>
712
</div>
813
</div>
914
);

0 commit comments

Comments
 (0)