this repo has no description
Further utilize lazy shazam
+20
-17
+5
-1
src/components/lazy-shazam.jsx
+5
-1
src/components/lazy-shazam.jsx
···
30
30
if (!containerRef.current) return;
31
31
const rect = containerRef.current.getBoundingClientRect();
32
32
if (rect.bottom > TOP) {
33
-
setVisibleStart(true);
33
+
if (rect.top < window.innerHeight) {
34
+
setVisible(true);
35
+
} else {
36
+
setVisibleStart(true);
37
+
}
34
38
}
35
39
}, []);
36
40
+15
-16
src/components/translation-block.jsx
+15
-16
src/components/translation-block.jsx
···
10
10
import pmem from '../utils/pmem';
11
11
12
12
import Icon from './icon';
13
+
import LazyShazam from './lazy-shazam';
13
14
import Loader from './loader';
14
15
15
16
const { PHANPY_LINGVA_INSTANCES } = import.meta.env;
···
142
143
detectedLang !== targetLangText
143
144
) {
144
145
return (
145
-
<div class="shazam-container">
146
-
<div class="shazam-container-inner">
147
-
<div class="status-translation-block-mini">
148
-
<Icon
149
-
icon="translate"
150
-
alt={`Auto-translated from ${sourceLangText}`}
151
-
/>
152
-
<output
153
-
lang={targetLang}
154
-
dir="auto"
155
-
title={pronunciationContent || ''}
156
-
>
157
-
{translatedContent}
158
-
</output>
159
-
</div>
146
+
<LazyShazam>
147
+
<div class="status-translation-block-mini">
148
+
<Icon
149
+
icon="translate"
150
+
alt={`Auto-translated from ${sourceLangText}`}
151
+
/>
152
+
<output
153
+
lang={targetLang}
154
+
dir="auto"
155
+
title={pronunciationContent || ''}
156
+
>
157
+
{translatedContent}
158
+
</output>
160
159
</div>
161
-
</div>
160
+
</LazyShazam>
162
161
);
163
162
}
164
163
return null;