feat: add navigation loading skeleton#671
Merged
mikewheeleer merged 1 commit intoJul 25, 2026
Merged
Conversation
This implements a content-shaped loading skeleton for the Navbar to prevent layout shift during initialization. It matches the shape of the navigation links and replaces them while the state settles. - Created useNavigation hook to handle route loading state - Added animate-shimmer skeleton to Navbar when isLoading is true - Set aria-hidden on skeleton and aria-busy on the nav wrapper - Handled error state with a fallback message - Added robust test coverage for loading, error, and settled states
|
@AbuJulaybeeb Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Contributor
|
solid PR @AbuJulaybeeb — clear diff, good coverage. merging 🙌 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #647
What was done
useNavigationhook to facilitate handling edge cases (loading, error, and settled states).Navbar.tsxthat matches the exact dimensions of the navigation list, utilizing existinganimate-shimmerclasses.Why it was done
To prevent layout shift and confusing empty states when the application navigation is initializing or when data fetching causes the navigation to delay mounting.
How it was verified
Navbar.test.tsxsimulating slow load, fast load, and error states.jest-axeto enforce accessibility standards (aria-busy,aria-hiddenmanagement, etc.).npm run lint,npm test, andnpm run buildall pass successfully.