Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-25 06:54:43 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make lazy shazam ignore top sticky header

Browse source
This commit is contained in:
Lim Chee Aun 2024-04-03 11:53:03 +08:00
parent e3c25d25ee
commit 960dff8b9e
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/lazy-shazam.jsx
View file

@ -4,6 +4,9 @@
import { useLayoutEffect, useRef, useState } from 'preact/hooks'; import { useLayoutEffect, useRef, useState } from 'preact/hooks';
import { useInView } from 'react-intersection-observer'; import { useInView } from 'react-intersection-observer';
// The sticky header, usually at the top
const TOP = 48;
export default function LazyShazam({ children }) { export default function LazyShazam({ children }) {
const containerRef = useRef(); const containerRef = useRef();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@ -11,6 +14,7 @@ export default function LazyShazam({ children }) {
const { ref } = useInView({ const { ref } = useInView({
root: null, root: null,
rootMargin: `-${TOP}px 0px 0px 0px`,
trackVisibility: true, trackVisibility: true,
delay: 1000, delay: 1000,
onChange: (inView) => { onChange: (inView) => {
@ -25,7 +29,7 @@ export default function LazyShazam({ children }) {
useLayoutEffect(() => { useLayoutEffect(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect(); const rect = containerRef.current.getBoundingClientRect();
if (rect.bottom > 0) { if (rect.bottom > TOP) {
setVisibleStart(true); setVisibleStart(true);
} }
}, []); }, []);