From 960dff8b9e7ea8e8ed93305ba0df65032a7e069a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 3 Apr 2024 11:53:03 +0800
Subject: [PATCH] Make lazy shazam ignore top sticky header
---
src/components/lazy-shazam.jsx | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/components/lazy-shazam.jsx b/src/components/lazy-shazam.jsx
index dfd2db7b..e340f276 100644
--- a/src/components/lazy-shazam.jsx
+++ b/src/components/lazy-shazam.jsx
@@ -4,6 +4,9 @@
import { useLayoutEffect, useRef, useState } from 'preact/hooks';
import { useInView } from 'react-intersection-observer';
+// The sticky header, usually at the top
+const TOP = 48;
+
export default function LazyShazam({ children }) {
const containerRef = useRef();
const [visible, setVisible] = useState(false);
@@ -11,6 +14,7 @@ export default function LazyShazam({ children }) {
const { ref } = useInView({
root: null,
+ rootMargin: `-${TOP}px 0px 0px 0px`,
trackVisibility: true,
delay: 1000,
onChange: (inView) => {
@@ -25,7 +29,7 @@ export default function LazyShazam({ children }) {
useLayoutEffect(() => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
- if (rect.bottom > 0) {
+ if (rect.bottom > TOP) {
setVisibleStart(true);
}
}, []);