Further utilize lazy shazam

src/components/lazy-shazam.jsx

@@ -30,7 +30,11 @@ export default function LazyShazam({ children }) {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     if (rect.bottom > TOP) {
-      setVisibleStart(true);
+      if (rect.top < window.innerHeight) {
+        setVisible(true);
+      } else {
+        setVisibleStart(true);
+      }
     }
   }, []);
 

src/components/translation-block.jsx

@@ -10,6 +10,7 @@ import localeCode2Text from '../utils/localeCode2Text';
 import pmem from '../utils/pmem';
 
 import Icon from './icon';
+import LazyShazam from './lazy-shazam';
 import Loader from './loader';
 
 const { PHANPY_LINGVA_INSTANCES } = import.meta.env;
@@ -142,23 +143,21 @@ function TranslationBlock({
       detectedLang !== targetLangText
     ) {
       return (
-        <div class="shazam-container">
+        <LazyShazam>
-          <div class="shazam-container-inner">
+          <div class="status-translation-block-mini">
-            <div class="status-translation-block-mini">
+            <Icon
-              <Icon
+              icon="translate"
-                icon="translate"
+              alt={`Auto-translated from ${sourceLangText}`}
-                alt={`Auto-translated from ${sourceLangText}`}
+            />
-              />
+            <output
-              <output
+              lang={targetLang}
-                lang={targetLang}
+              dir="auto"
-                dir="auto"
+              title={pronunciationContent || ''}
-                title={pronunciationContent || ''}
+            >
-              >
+              {translatedContent}
-                {translatedContent}
+            </output>
-              </output>
-            </div>
           </div>
-        </div>
+        </LazyShazam>
       );
     }
     return null;