From dec38e177067f2487a041b0ee96ae51077efcf66 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 1 Jun 2021 19:12:08 +0800
Subject: [PATCH] ChannelThumbnail: use 1x1 transparent image as starting point
 instead of 'undefined'.

## Issue
6135

While waiting for the lazy-loader IntersectionObserver to initialize, and for the real image to be fetched, an undefined `src` results in the "broken image" thumbnail.

## Fix
Use a transparent image as the starting point. This visually retains the current behavior but minus the "broken image" part.
---
 ui/component/channelThumbnail/transparent_1x1.png | Bin 0 -> 120 bytes
 ui/component/channelThumbnail/view.jsx            |   3 +++
 2 files changed, 3 insertions(+)
 create mode 100644 ui/component/channelThumbnail/transparent_1x1.png

diff --git a/ui/component/channelThumbnail/transparent_1x1.png b/ui/component/channelThumbnail/transparent_1x1.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdf950d0d721564f791b7983cbf3a4a5283505a1
GIT binary patch
literal 120
zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k92}K#X;^)4C~IxyaaMs(j9#r85lP9
zbN@+X1@buyJR*x382Ao@Fyrz36)8YLUQZXt5Q*^Q1Rwx%Ss56+j2{CT3=E#GelF{r
G5}E*S$r-T#

literal 0
HcmV?d00001

diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
index bc0d56441..fa89e839f 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { parseURI } from 'lbry-redux';
 import classnames from 'classnames';
 import Gerbil from './gerbil.png';
+import Transparent from './transparent_1x1.png';
 import FreezeframeWrapper from 'component/fileThumbnail/FreezeframeWrapper';
 import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import { getThumbnailCdnUrl } from 'util/thumbnail';
@@ -100,6 +101,7 @@ function ChannelThumbnail(props: Props) {
           alt={__('Channel profile picture')}
           className="channel-thumbnail__default"
           data-src={!thumbError && url ? url : Gerbil}
+          src={Transparent}
           onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
         />
       )}
@@ -113,6 +115,7 @@ function ChannelThumbnail(props: Props) {
               alt={__('Channel profile picture')}
               className="channel-thumbnail__custom"
               data-src={!thumbError && url ? url : Gerbil}
+              src={Transparent}
               onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
             />
           )}