ui/component/channelThumbnail/view.jsx

@@ -6,6 +6,7 @@ import Gerbil from './gerbil.png';
 import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import { getThumbnailCdnUrl } from 'util/thumbnail';
+import useLazyLoading from 'effects/use-lazy-loading';
 
 type Props = {
   thumbnail: ?string,
@@ -48,6 +49,7 @@ function ChannelThumbnail(props: Props) {
   const channelThumbnail = thumbnail || thumbnailPreview;
   const isGif = channelThumbnail && channelThumbnail.endsWith('gif');
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
+  const thumbnailRef = React.useRef(null);
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
   let initializer;
@@ -65,6 +67,8 @@ function ChannelThumbnail(props: Props) {
     }
   }, [doResolveUri, shouldResolve, uri]);
 
+  useLazyLoading(thumbnailRef, 0.25, [showThumb]);
+
   if (isGif && !allowGifs) {
     return (
       <FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
@@ -92,6 +96,7 @@ function ChannelThumbnail(props: Props) {
     >
       {!showThumb && (
         <img
+          ref={thumbnailRef}
           alt={__('Channel profile picture')}
           className="channel-thumbnail__default"
           src={!thumbError && url ? url : Gerbil}
@@ -104,6 +109,7 @@ function ChannelThumbnail(props: Props) {
             <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
           ) : (
             <img
+              ref={thumbnailRef}
               alt={__('Channel profile picture')}
               className="channel-thumbnail__custom"
               src={!thumbError && url ? url : Gerbil}