Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-22 21:59:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

Test caching shazam states

Browse source
This commit is contained in:
Lim Chee Aun 2024-04-22 16:42:12 +08:00
parent 1f29aee26e
commit c8dc32b884
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/lazy-shazam.jsx
View file

@ -7,10 +7,13 @@ import { useInView } from 'react-intersection-observer';
// The sticky header, usually at the top // The sticky header, usually at the top
const TOP = 48; const TOP = 48;
export default function LazyShazam({ children }) { const shazamIDs = {};
export default function LazyShazam({ id, children }) {
const containerRef = useRef(); const containerRef = useRef();
const hasID = !!shazamIDs[id];
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [visibleStart, setVisibleStart] = useState(false); const [visibleStart, setVisibleStart] = useState(hasID || false);
const { ref } = useInView({ const { ref } = useInView({
root: null, root: null,
@ -20,6 +23,7 @@ export default function LazyShazam({ children }) {
onChange: (inView) => { onChange: (inView) => {
if (inView) { if (inView) {
setVisible(true); setVisible(true);
if (id) shazamIDs[id] = true;
} }
}, },
triggerOnce: true, triggerOnce: true,
@ -35,6 +39,7 @@ export default function LazyShazam({ children }) {
} else { } else {
setVisibleStart(true); setVisibleStart(true);
} }
if (id) shazamIDs[id] = true;
} }
}, []); }, []);

2
src/components/status.jsx
View file

@ -3337,7 +3337,7 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
return uniqueQuotes.map((q) => { return uniqueQuotes.map((q) => {
return ( return (
<LazyShazam> <LazyShazam id={q.instance + q.id}>
<Link <Link
key={q.instance + q.id} key={q.instance + q.id}
to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`} to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}