From b5cc0bb42de162137a3df1b1cebc0b01bd2cee27 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 22 Apr 2021 23:37:25 +0800
Subject: [PATCH] Disable thumbnail lazy-load for Channels

## Issue
5933: Thumbnail lazy-load causes ChannelSelector icon to not update
---
 ui/component/channelThumbnail/view.jsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
index acca9c1a0..d3af5c508 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import Gerbil from './gerbil.png';
 import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
-import useLazyLoading from 'effects/use-lazy-loading';
 
 type Props = {
   thumbnail: ?string,
@@ -43,7 +42,6 @@ function ChannelThumbnail(props: Props) {
   const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
   const channelThumbnail = thumbnail || thumbnailPreview;
   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;
@@ -61,8 +59,6 @@ function ChannelThumbnail(props: Props) {
     }
   }, [doResolveUri, shouldResolve, uri]);
 
-  useLazyLoading(thumbnailRef, 0.25, [showThumb]);
-
   if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
     return (
       <FreezeframeWrapper src={channelThumbnail} className={classnames('channel-thumbnail', className)}>
@@ -81,10 +77,9 @@ function ChannelThumbnail(props: Props) {
     >
       {!showThumb && (
         <img
-          ref={thumbnailRef}
           alt={__('Channel profile picture')}
           className="channel-thumbnail__default"
-          data-src={!thumbError && thumbnailPreview ? thumbnailPreview : Gerbil}
+          src={!thumbError && thumbnailPreview ? thumbnailPreview : Gerbil}
           onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
         />
       )}
@@ -94,10 +89,9 @@ 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"
-              data-src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
+              src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
               onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
             />
           )}