fix: dashboard icon flickering #2170
Conversation
AkshayBandi027
requested review from
perkinsjr,
chronark and
mcstepp
as code owners
|
|
@AkshayBandi027 is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe pull request introduces several modifications across multiple files, primarily focusing on enhancing the functionality of the dashboard components. Key changes include the active import of Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
github-actions
bot
added
🕹️ 150 points
Bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
apps/dashboard/lib/hooks/useDelayLoader.tsx (3)
3-3: LGTM: Well-structured hook declaration with a minor suggestion.The hook is correctly named and exported, with appropriate parameters. However, consider using a more specific type for the
delayparameter.Consider updating the parameter types for improved clarity:
-export const useDelayLoader = (isPending: boolean, delay = 50) => { +export const useDelayLoader = (isPending: boolean, delay: number = 50) => {
4-22: LGTM: Effective implementation with a minor optimization suggestion.The hook implementation effectively addresses the flickering issue by introducing a delay before showing the loader. The use of
useEffectwith a cleanup function is a good practice to prevent memory leaks.Consider this minor optimization to avoid unnecessary state updates:
useEffect(() => { let timeout: NodeJS.Timeout; if (isPending) { timeout = setTimeout(() => { setShowLoader(true); }, delay); } else { - setShowLoader(false); + if (showLoader) { + setShowLoader(false); + } } return () => { clearTimeout(timeout); }; -}, [isPending, delay]); +}, [isPending, delay, showLoader]);This change prevents unnecessary state updates when
showLoaderis already false, potentially improving performance.
1-22: Great solution! Consider adding documentation.This custom hook effectively addresses the icon flickering issue described in the PR objectives. It's a well-implemented, reusable solution that follows React best practices.
To enhance maintainability, consider adding a brief JSDoc comment explaining the hook's purpose and parameters:
/** * A custom hook that introduces a delay before showing a loader to prevent flickering. * @param isPending - Indicates whether the loading state is active. * @param delay - The delay in milliseconds before showing the loader (default: 50ms). * @returns A boolean indicating whether to show the loader. */ export const useDelayLoader = (isPending: boolean, delay: number = 50) => { // ... (existing implementation) };apps/dashboard/app/(app)/authorization/permissions/page.tsx (1)
22-22: LGTM: ImprovedorderBypropertyThe adjustment to the
orderByproperty is correct and improves code consistency by using the importedpermissionsschema. This change enhances readability and maintains a consistent structure throughout the codebase.For even better consistency, consider using object shorthand notation:
- orderBy: [asc(permissions.name)], + orderBy: [{ permissions: { name: asc } }],This aligns with the Prisma query API style and might be more consistent with other parts of your codebase.
apps/dashboard/app/(app)/desktop-sidebar.tsx (1)
Line range hint
1-270: Overall impact: Improved loading state managementThe changes in this file effectively address the icon flickering issue mentioned in the PR objectives. The introduction of the
useDelayLoaderhook and its application in theNavLinkcomponent provide a more controlled approach to managing loading states during navigation.Key points:
- The solution is focused and minimal, reducing the risk of introducing new issues.
- The use of a custom hook suggests a reusable approach that could be applied to other components if similar issues arise.
Suggestions for future improvements:
- Consider adding comments explaining the purpose of
useDelayLoaderfor future maintainers.- If this solution proves effective, consider applying it to other areas of the application where similar loading state issues might occur.
To further improve the application's architecture and performance:
- Consider implementing a global loading state manager using React Context if loading state management becomes a common concern across multiple components.
- Evaluate the performance impact of this change and document any significant improvements for future reference.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- apps/dashboard/app/(app)/authorization/permissions/page.tsx (2 hunks)
- apps/dashboard/app/(app)/desktop-sidebar.tsx (3 hunks)
- apps/dashboard/lib/hooks/useDelayLoader.tsx (1 hunks)
- packages/ratelimit/package.json (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/ratelimit/package.json
🔇 Additional comments (5)
apps/dashboard/lib/hooks/useDelayLoader.tsx (1)
1-1: LGTM: Appropriate imports.The necessary React hooks (
useEffectanduseState) are correctly imported.apps/dashboard/app/(app)/authorization/permissions/page.tsx (2)
6-6: LGTM: Import statement added correctlyThe addition of the import statement for
permissionsfrom@unkey/db/src/schemais appropriate. This change ensures that thepermissionsschema is explicitly imported and used in the component, which aligns with best practices for code clarity and maintainability.
Line range hint
1-114: Verify impact on icon flickering issueWhile the changes in this file improve code quality and consistency, they don't appear to directly address the icon flickering issue mentioned in the PR objectives (issue #2156).
To ensure we're addressing the main objective of this PR:
- Please confirm if there are other files in this PR that more directly tackle the icon flickering problem.
- If not, consider investigating the rendering of icons in the dashboard, particularly when switching between workspace tabs. This might involve:
- Checking for any unnecessary re-renders
- Ensuring proper use of React's
keyprop for list items- Verifying that icon components are optimized for performance
This will help us identify files that might be more relevant to the flickering issue.
apps/dashboard/app/(app)/desktop-sidebar.tsx (2)
6-6: LGTM: New import for useDelayLoaderThe new import for
useDelayLoaderis correctly placed and follows good practices for importing custom hooks.
223-223: Improved loading state managementThe introduction of
useDelayLoaderand the use ofshowLoaderinstead ofisPendingfor rendering the loading indicator is a good approach. This change likely addresses the icon flickering issue mentioned in the PR objectives by providing more control over when the loading state is displayed.A few points to consider:
- The implementation looks good and aligns with the PR's goal.
- This change should reduce unnecessary re-renders and provide a smoother transition between states.
To ensure this change doesn't introduce any regressions, please verify the following:
- The loading indicator appears and disappears smoothly when navigating between tabs.
- There's no visible flickering of icons during navigation.
Also applies to: 248-252
perkinsjr
changed the title
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Nice one, this is super clean |
|
Awarding AkshayBandi027: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/AkshayBandi027 |
* fix: dashboard-icons-flickering * ran format
What does this PR do?
Fixes #2156
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
unkey-icons.mp4
Summary by CodeRabbit
New Features
useDelayLoaderfor improved loading state management.NavLinkcomponent.Bug Fixes
permissionsin theRolesPagecomponent to ensure proper functionality.Chores