New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Social Network Sharing on Issue Page, Upgrade to Next 10.2 and use Webpack 5 #50
Conversation
const toggleVisibiltyOnScroll = debounce(() => { | ||
const currentScrollPos = window.pageYOffset; | ||
if (window.scrollY > prevScrollPos) { | ||
const opacity = | ||
(prevScrollPos > currentScrollPos && prevScrollPos - currentScrollPos > 70) || currentScrollPos < 10 ? 1 : 0; | ||
setBtnOpacity(opacity); | ||
} else { | ||
setBtnOpacity(1); | ||
} | ||
setPrevScrollPos(currentScrollPos); | ||
}, 100); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Calling this function even with debounce every 100ms might hurt performance. Can we try Intersection observer API because it is just meant for doing this stuff in a performant way. There is also a custom hook for it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
umm I don't think we can use Intersection Observer API here - it's mostly meant to use when a particular element is on screen or not (AFAIK)
our floating button needs to be triggered by scroll, not by it's viewport position. am I making sense?
even the hook website you mentioned uses scroll position to trigger it's back-to-top button (see code) π
useHooks is also a good TS/JS hook resource btw ππ»
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TIL I can edit your review comment , WTF & why? π
This PR adds following changes:
π₯ Breaking Changes
build
command locally & on vercel as wellbefore -
node purgableCSSGenerator.js && next build
after -
node scripts/purgableCSSGenerator.js && next build
π« Animated Floating Share Button on Issue Page
TODO
useScrollPosition
hook for getting scroll positionβ¬οΈ Upgrade to NextJS 10.2
@svgr/webpack
for webpack 5 from this issue commentβ‘ Faster Morph Animation