hack together a thumbnail message on the channel page

config.js

@@ -2,8 +2,6 @@
 // On Desktop App, this will find .env.defaults and optional .env in root dir
 require('dotenv-defaults').config({ silent: false });
 
-console.log('process.env.SIMPLE_SITE', process.env.SIMPLE_SITE);
-
 const config = {
   MATOMO_URL: process.env.MATOMO_URL,
   MATOMO_ID: process.env.MATOMO_ID,

ui/component/channelEdit/view.jsx

@@ -80,6 +80,7 @@ function ChannelForm(props: Props) {
   } = props;
   const [nameError, setNameError] = React.useState(undefined);
   const [bidError, setBidError] = React.useState('');
+  const [coverError, setCoverError] = React.useState(false);
   const { claim_id: claimId } = claim || {};
   const [params, setParams]: [any, (any) => void] = React.useState(getChannelParams());
   const { channelName } = parseURI(uri);
@@ -228,7 +229,12 @@ function ChannelForm(props: Props) {
               iconSize={18}
             />
           </div>
-          {params.coverUrl && <img className="channel-cover__custom" src={params.coverUrl} />}
+          {params.coverUrl &&
+            (coverError ? (
+              <div className="channel-cover__custom--waiting">{__('This will be visible in a few minutes.')}</div>
+            ) : (
+              <img className="channel-cover__custom" src={params.coverUrl} onError={() => setCoverError(true)} />
+            ))}
           <div className="channel__primary-info">
             <div className="channel__edit-thumb">
               <Button
@@ -252,6 +258,7 @@ function ChannelForm(props: Props) {
               uri={uri}
               thumbnailPreview={params.thumbnailUrl}
               allowGifs
+              showDelayedMessage
             />
             <h1 className="channel__title">
               {params.title || (channelName && '@' + channelName) || (params.name && '@' + params.name)}

ui/component/channelThumbnail/view.jsx

@@ -16,6 +16,7 @@ type Props = {
   claim: ?ChannelClaim,
   doResolveUri: string => void,
   isResolving: boolean,
+  showDelayedMessage?: boolean,
 };
 
 function ChannelThumbnail(props: Props) {
@@ -30,6 +31,7 @@ function ChannelThumbnail(props: Props) {
     claim,
     doResolveUri,
     isResolving,
+    showDelayedMessage = false,
   } = props;
   const [thumbError, setThumbError] = React.useState(false);
   const shouldResolve = claim === undefined;
@@ -74,6 +76,10 @@ function ChannelThumbnail(props: Props) {
         />
       )}
       {showThumb && (
+        <>
+          {showDelayedMessage && thumbError ? (
+            <div className="chanel-thumbnail--waiting">{__('This will be visible in a few minutes.')}</div>
+          ) : (
             <img
               alt={__('Channel profile picture')}
               className="channel-thumbnail__custom"
@@ -81,6 +87,8 @@ function ChannelThumbnail(props: Props) {
               onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
             />
           )}
+        </>
+      )}
     </div>
   );
 }

ui/modal/modalConfirmThumbnailUpload/view.jsx

@@ -20,7 +20,7 @@ class ModalConfirmThumbnailUpload extends React.PureComponent<Props> {
 
   render() {
     const { closeModal, file } = this.props;
-    console.log('file', file);
+
     return (
       <Modal
         isOpen

ui/scss/component/_channel.scss

@@ -34,6 +34,13 @@ $metadata-z-index: 1;
   }
 }
 
+.channel-cover__custom--waiting {
+  background-color: var(--color-gray-5);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
 .channel-cover__gradient {
   width: 100%;
   height: 100%;
@@ -69,6 +76,14 @@ $metadata-z-index: 1;
   width: 3rem;
 }
 
+.chanel-thumbnail--waiting {
+  background-color: var(--color-gray-5);
+  border-radius: var(--border-radius);
+  padding-top: 4rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .channel__thumbnail--channel-page {
   position: absolute;
   height: var(--channel-thumbnail-width);