feat: optimize banner rendering performance to improve Lighthouse score fixes 3335 #3519
Conversation
IITI-tushar
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe pull request focuses on optimizing the Changes
Assessment against linked issues
Suggested Labels
Suggested Reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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
Documentation and Community
|
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-3519--asyncapi-website.netlify.app/ |
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
IITI-tushar
changed the title
![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
🧹 Nitpick comments (2)
components/campaigns/AnnouncementHero.tsx (2)
67-68: Address linting requirement for spacing
ESLint flags these lines for missing blank lines after variable declarations. Consider adding a blank line after declaringisVisible.const isVisible = Math.abs(index - (activeIndex % numberOfVisibleBanners)) <= 1; + // Add a blank line here if (!isVisible) return null;🧰 Tools
🪛 eslint
[error] 67-68: Expected blank line after variable declarations.
(newline-after-var)
[error] 67-68: Delete
⏎···············(prettier/prettier)
92-94: Minor lint / formatting suggestion
ESLint highlights spacing issues around the ternary expression. Consider removing unnecessary newlines or bracket spacing for consistency.className={`mx-1 size-2 cursor-pointer rounded-full ${ - activeIndex % numberOfVisibleBanners === index - ? 'bg-primary-500' - : 'bg-gray-300' + (activeIndex % numberOfVisibleBanners === index + ? 'bg-primary-500' + : 'bg-gray-300') }`}🧰 Tools
🪛 eslint
[error] 92-94: Replace
⏎····················?·'bg-primary-500'⏎···················with·?·'bg-primary-500'(prettier/prettier)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/campaigns/AnnouncementHero.tsx(1 hunks)
🧰 Additional context used
🪛 eslint
components/campaigns/AnnouncementHero.tsx
[error] 67-68: Expected blank line after variable declarations.
(newline-after-var)
[error] 67-68: Delete ⏎···············
(prettier/prettier)
[error] 69-69: Expected blank line before this statement.
(padding-line-between-statements)
[error] 70-84: Expected blank line before this statement.
(padding-line-between-statements)
[error] 92-94: Replace ⏎····················?·'bg-primary-500'⏎··················· with ·?·'bg-primary-500'
(prettier/prettier)
🔇 Additional comments (2)
components/campaigns/AnnouncementHero.tsx (2)
65-69: Good approach for reducing render overhead by limiting displayed banners
Only rendering the active banner and its immediate neighbors is an efficient way to reduce unnecessary render operations and improve performance, especially when there are many banners.
🧰 Tools
🪛 eslint
[error] 67-68: Expected blank line after variable declarations.
(newline-after-var)
[error] 67-68: Delete ⏎···············
(prettier/prettier)
[error] 69-69: Expected blank line before this statement.
(padding-line-between-statements)
70-84: Banner rendering structure
The conditional return for invisible banners is clear, but ensure that the banner’s parent container handles layout gracefully if no items are rendered concurrently in certain edge cases (e.g., when numberOfVisibleBanners is 2 or fewer).
🧰 Tools
🪛 eslint
[error] 70-84: Expected blank line before this statement.
(padding-line-between-statements)
IITI-tushar
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3519 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 19 19
Lines 668 668
=========================================
Hits 668 668 ☔ View full report in Codecov by Sentry. |
Description
updated AnnouncementHero.tsx based on code-rabbit suggestions in comment #3312 (comment)
**Related issue(s)**Resolves #3335
Summary by CodeRabbit