Further utilize lazy shazam

src/components/lazy-shazam.jsx

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

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,8 +143,7 @@ function TranslationBlock({
       detectedLang !== targetLangText
     ) {
       return (
-        <div class="shazam-container">
+        <LazyShazam>
-          <div class="shazam-container-inner">
           <div class="status-translation-block-mini">
             <Icon
               icon="translate"
@@ -157,8 +157,7 @@ function TranslationBlock({
               {translatedContent}
             </output>
           </div>
-          </div>
+        </LazyShazam>
-        </div>
       );
     }
     return null;