LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

move lazy loading effect into effects/

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/channelThumbnail/view.jsx
View file

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

2
ui/component/fileThumbnail/FreezeframeWrapper.jsx
View file

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

2
ui/component/fileThumbnail/view.jsx
View file

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

11
ui/util/useLazyLoading.js → ui/effects/use-lazy-loading.js
View file

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