fix: show back to top button at bottom #4464
Conversation
YashSikarwar28
requested review from
Mayaleeeee,
akshatnema,
anshgoyalevil,
asyncapi-bot-eve,
derberg and
sambhavgupta0705
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.
WalkthroughConverts ScrollButton to a typed React functional component that only shows when the user is at the bottom of the page (throttled scroll detection, smooth scroll-to-top). Adds Next.js triple-slash type references and reformats several Markdown docs; minor JSON reformatting in mlc_config.json. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant W as Window
participant SB as ScrollButton
participant D as Document
Note over SB: Mount
SB->>W: addEventListener('scroll', throttled handleScroll)
SB->>SB: run handleScroll() once on mount
W->>SB: scroll event (throttled)
SB->>D: read pageYOffset, innerHeight, documentElement.scrollHeight
alt at-bottom
SB-->>U: render circular fixed button (emoji)
else not-at-bottom
SB-->>U: render null
end
U->>SB: click button
SB->>W: window.scrollTo({ top: 0, behavior: 'smooth' })
Note over SB: Unmount
SB->>W: removeEventListener('scroll', handleScroll)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
YashSikarwar28
changed the title
YashSikarwar28
changed the title
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4464--asyncapi-website.netlify.app/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
components/buttons/ScrollButton.tsx (2)
7-13: Add debouncing or throttling to the scroll event handler.The scroll event fires very frequently during scrolling, potentially causing performance issues. Consider throttling the handler to limit executions.
Here's an example using a simple throttle approach:
+ const [isBottom, setIsBottom] = useState(false); + + useEffect(() => { + let timeoutId: NodeJS.Timeout | null = null; + const handleScroll = () => { + if (timeoutId) return; + + timeoutId = setTimeout(() => { + const scrollTop = window.scrollY || document.documentElement.scrollTop; + const windowHeight = window.innerHeight; + const fullHeight = document.documentElement.scrollHeight; + + setIsBottom(scrollTop + windowHeight >= fullHeight - 10); + timeoutId = null; + }, 100); - const scrollTop = window.scrollY || document.documentElement.scrollTop; - const windowHeight = window.innerHeight; - const fullHeight = document.documentElement.scrollHeight; - - setIsBottom(scrollTop + windowHeight >= fullHeight - 10); };
31-31: Consider using an icon component instead of Unicode arrow.The Unicode arrow (↑) may render inconsistently across different browsers, operating systems, and font configurations. Consider using an SVG icon or an icon library for better visual consistency and accessibility.
Example using an SVG arrow:
- ↑ + <svg + className='h-6 w-6' + fill='none' + stroke='currentColor' + viewBox='0 0 24 24' + xmlns='http://www.w3.org/2000/svg' + > + <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 10l7-7m0 0l7 7m-7-7v18' /> + </svg>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/buttons/ScrollButton.tsx(1 hunks)next-env.d.ts(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: PR testing - if Node project
next-env.d.ts
[error] Process completed with exit code 1.
components/buttons/ScrollButton.tsx
[warning] 3-3: Missing JSDoc comment. require-jsdoc
[error] 28-28: max-len: This line has a length of 188. Maximum allowed is 120.
[error] 28-28: prettier/prettier: Replace "fixed bottom-6 right-6 ... text-lg" with 'fixed bottom-6 right-6 ... text-lg'.
[error] 28-28: jsx-quotes: Unexpected usage of doublequote.
[error] 29-29: prettier/prettier: Replace "Scroll to top" with 'Scroll to top'.
[error] 29-29: jsx-quotes: Unexpected usage of doublequote.
[error] 34-34: prettier/prettier: Delete newline character.
[error] 36-36: no-multiple-empty-lines: More than 1 blank line not allowed.
[error] Process completed with exit code 1.
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/buttons/ScrollButton.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: PR testing - if Node project
components/buttons/ScrollButton.tsx
[error] 13-13: ESLint: Expected blank line after variable declarations. newline-after-var
[error] 14-14: ESLint: Expected blank line before this statement. padding-line-between-statements
[error] 21-21: ESLint: 'NodeJS' is not defined. no-undef
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
components/buttons/ScrollButton.tsx (1)
23-30: ReplaceNodeJS.TimeoutwithReturnType<typeof setTimeout>.The browser bundle doesn’t expose the
NodeJSnamespace, so ESLint flags this spot (no-undef) and the build breaks. Switch the declaration tolet throttleTimeout: ReturnType<typeof setTimeout> | null = null;(and keep the null checks/clearTimeout logic) to stay DOM-safe.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (25)
public/img/illustrations/icons/doc-sync.svgis excluded by!**/*.svgpublic/img/illustrations/icons/help.svgis excluded by!**/*.svgpublic/img/illustrations/icons/laptop-cloud.svgis excluded by!**/*.svgpublic/img/illustrations/icons/laptop-globe.svgis excluded by!**/*.svgpublic/img/illustrations/icons/maternity.svgis excluded by!**/*.svgpublic/img/illustrations/icons/mobile-feed.svgis excluded by!**/*.svgpublic/img/illustrations/icons/mouse-globe.svgis excluded by!**/*.svgpublic/img/illustrations/icons/open-source.svgis excluded by!**/*.svgpublic/img/illustrations/icons/plug-cloud.svgis excluded by!**/*.svgpublic/img/illustrations/icons/robotic.svgis excluded by!**/*.svgpublic/img/illustrations/icons/tools.svgis excluded by!**/*.svgpublic/img/illustrations/worker.svgis excluded by!**/*.svgpublic/img/loaders/audio.svgis excluded by!**/*.svgpublic/img/loaders/ball-triangle.svgis excluded by!**/*.svgpublic/img/loaders/bars.svgis excluded by!**/*.svgpublic/img/loaders/circles.svgis excluded by!**/*.svgpublic/img/loaders/grid.svgis excluded by!**/*.svgpublic/img/loaders/hearts.svgis excluded by!**/*.svgpublic/img/loaders/oval.svgis excluded by!**/*.svgpublic/img/loaders/puff.svgis excluded by!**/*.svgpublic/img/loaders/rings.svgis excluded by!**/*.svgpublic/img/loaders/spinning-circles.svgis excluded by!**/*.svgpublic/img/loaders/tail-spin.svgis excluded by!**/*.svgpublic/img/loaders/three-dots.svgis excluded by!**/*.svgpublic/img/logos/asyncapi-horizontal-color.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
components/buttons/ScrollButton.tsx(1 hunks)markdown/docs/community/060-meetings-and-communication/docs-community.md(1 hunks)markdown/docs/community/COC-incident-resolution-procedures.md(1 hunks)mlc_config.json(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- markdown/docs/community/COC-incident-resolution-procedures.md
- markdown/docs/community/060-meetings-and-communication/docs-community.md
- mlc_config.json
🧰 Additional context used
🪛 GitHub Actions: PR testing - if Node project
components/buttons/ScrollButton.tsx
[error] 1-1: ESLint: Expected space or tab after '//' in comment. (spaced-comment)
[error] 23-23: ESLint: 'NodeJS' is not defined. (no-undef)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
3 participants
Resolves #4463
11.10.2025_23.20.29_REC.mp4
Description
bg-purple-600) with hover effect.rounded-full,h-12,w-12).Summary by CodeRabbit
New Behavior
Style
Refactor
Documentation
Chores