move lazy loading effect into effects/

This commit is contained in:
Sean Yesmunt 2021-04-14 15:02:02 -04:00
parent a7cb0e240e
commit e4a3e54613
4 changed files with 11 additions and 6 deletions

View file

@ -5,7 +5,7 @@ import classnames from 'classnames';
import Gerbil from './gerbil.png';
import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
import useLazyLoading from '../../util/useLazyLoading';
import useLazyLoading from 'effects/use-lazy-loading';
type Props = {
thumbnail: ?string,

View file

@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Freezeframe from './FreezeframeLite';
import useLazyLoading from '../../util/useLazyLoading';
import useLazyLoading from 'effects/use-lazy-loading';
const FreezeframeWrapper = (props) => {
const imgRef = React.useRef();

View file

@ -5,7 +5,7 @@ import React from 'react';
import FreezeframeWrapper from './FreezeframeWrapper';
import Placeholder from './placeholder.png';
import classnames from 'classnames';
import useLazyLoading from '../../util/useLazyLoading';
import useLazyLoading from 'effects/use-lazy-loading';
type Props = {
uri: string,

View file

@ -1,3 +1,5 @@
// @flow
import type { ElementRef } from 'react';
import { useEffect } from 'react';
/**
@ -6,7 +8,11 @@ import { useEffect } from 'react';
* @param {Number} [threshold=0.5] - The percent visible in order for loading to begin.
* @param {Array<>} [deps=[]] - The dependencies this lazy-load is reliant on.
*/
export default function useLazyLoading(elementRef, threshold = 0.25, deps = []) {
export default function useLazyLoading(
elementRef: { current: ?ElementRef<any> },
threshold: number = 0.25,
deps: Array<any> = []
) {
useEffect(() => {
if (!elementRef.current) {
return;
@ -22,6 +28,7 @@ export default function useLazyLoading(elementRef, threshold = 0.25, deps = [])
// useful for lazy loading img tags
if (target.dataset.src) {
// $FlowFixMe
target.src = target.dataset.src;
return;
}
@ -41,7 +48,5 @@ export default function useLazyLoading(elementRef, threshold = 0.25, deps = [])
);
lazyLoadingObserver.observe(elementRef.current);
// re-run whenever the element ref changes
}, deps);
}