move lazy loading effect into effects/
This commit is contained in:
parent
a7cb0e240e
commit
e4a3e54613
4 changed files with 11 additions and 6 deletions
|
@ -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,
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
}
|
Loading…
Reference in a new issue