4dc333de41
## Issue 6010: hyperchat send display issues with GIF profiles The FreezeFrameWrapper have no `src` to freeze due to the lazy loading. ## Fix Delay the freezing by making the lazy-load effect return a state to indicate when then `src` has been loaded. Since the lazy-loader will `unobserve` after loading, the state will never go back to false, so we don't need to handle the case of preventing `new FreezeFrameWrapper` from being called multiple times from it's effect.
37 lines
935 B
JavaScript
37 lines
935 B
JavaScript
import React, { useEffect } from 'react';
|
|
import classnames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import Freezeframe from './FreezeframeLite';
|
|
import useLazyLoading from 'effects/use-lazy-loading';
|
|
|
|
const FreezeframeWrapper = (props) => {
|
|
const imgRef = React.useRef();
|
|
const freezeframe = React.useRef();
|
|
// eslint-disable-next-line
|
|
const { src, className, children } = props;
|
|
|
|
const srcLoaded = useLazyLoading(imgRef);
|
|
|
|
useEffect(() => {
|
|
if (srcLoaded) {
|
|
freezeframe.current = new Freezeframe(imgRef.current);
|
|
}
|
|
}, [srcLoaded]);
|
|
|
|
return (
|
|
<div className={classnames(className, 'freezeframe-wrapper')}>
|
|
<>
|
|
<img ref={imgRef} data-src={src} className="freezeframe-img" />
|
|
{children}
|
|
</>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
FreezeframeWrapper.propTypes = {
|
|
src: PropTypes.string.isRequired,
|
|
className: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default FreezeframeWrapper;
|