From c8dc32b884cee33142066b99206e43c422d83287 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 22 Apr 2024 16:42:12 +0800
Subject: [PATCH] Test caching shazam states

---
 src/components/lazy-shazam.jsx | 9 +++++++--
 src/components/status.jsx      | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/lazy-shazam.jsx b/src/components/lazy-shazam.jsx
index b50c46d..4e441be 100644
--- a/src/components/lazy-shazam.jsx
+++ b/src/components/lazy-shazam.jsx
@@ -7,10 +7,13 @@ import { useInView } from 'react-intersection-observer';
 // The sticky header, usually at the top
 const TOP = 48;
 
-export default function LazyShazam({ children }) {
+const shazamIDs = {};
+
+export default function LazyShazam({ id, children }) {
   const containerRef = useRef();
+  const hasID = !!shazamIDs[id];
   const [visible, setVisible] = useState(false);
-  const [visibleStart, setVisibleStart] = useState(false);
+  const [visibleStart, setVisibleStart] = useState(hasID || false);
 
   const { ref } = useInView({
     root: null,
@@ -20,6 +23,7 @@ export default function LazyShazam({ children }) {
     onChange: (inView) => {
       if (inView) {
         setVisible(true);
+        if (id) shazamIDs[id] = true;
       }
     },
     triggerOnce: true,
@@ -35,6 +39,7 @@ export default function LazyShazam({ children }) {
       } else {
         setVisibleStart(true);
       }
+      if (id) shazamIDs[id] = true;
     }
   }, []);
 
diff --git a/src/components/status.jsx b/src/components/status.jsx
index c359872..c8e3fae 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -3337,7 +3337,7 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
 
   return uniqueQuotes.map((q) => {
     return (
-      <LazyShazam>
+      <LazyShazam id={q.instance + q.id}>
         <Link
           key={q.instance + q.id}
           to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}