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);
     }
   }, []);