Test this lazy shazam

src/components/lazy-shazam.jsx

@@ -0,0 +1,46 @@
+/*
+  Rendered but hidden. Only show when visible
+*/
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { useInView } from 'react-intersection-observer';
+
+export default function LazyShazam({ children }) {
+  const containerRef = useRef();
+  const [visible, setVisible] = useState(false);
+  const [visibleStart, setVisibleStart] = useState(false);
+
+  const { ref } = useInView({
+    root: null,
+    trackVisibility: true,
+    delay: 1000,
+    onChange: (inView) => {
+      if (inView) {
+        setVisible(true);
+      }
+    },
+    triggerOnce: true,
+    skip: visibleStart || visible,
+  });
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    if (rect.bottom > 0) {
+      setVisibleStart(true);
+    }
+  }, []);
+
+  if (visibleStart) return children;
+
+  return (
+    <div
+      ref={containerRef}
+      class="shazam-container no-animation"
+      hidden={!visible}
+    >
+      <div ref={ref} class="shazam-container-inner">
+        {children}
+      </div>
+    </div>
+  );
+}

src/components/status.jsx

@@ -26,6 +26,7 @@ import { useSnapshot } from 'valtio';
 
 import CustomEmoji from '../components/custom-emoji';
 import EmojiText from '../components/emoji-text';
+import LazyShazam from '../components/lazy-shazam';
 import Loader from '../components/loader';
 import Menu2 from '../components/menu2';
 import MenuConfirm from '../components/menu-confirm';
@@ -3128,6 +3129,7 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
 
   return uniqueQuotes.map((q) => {
     return (
+      <LazyShazam>
         <Link
           key={q.instance + q.id}
           to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}
@@ -3142,6 +3144,7 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
             enableCommentHint
           />
         </Link>
+      </LazyShazam>
     );
   });
 });