Apply placeholder images

https://lbryians.slack.com/archives/C81FGKR51/p1624278721203900?thread_ts=1624269131.202200&cid=C81FGKR51

The intrinsic size needs to be at least equal the final image's size. Stretching, SVGs, etc. doesn't count.

ui/component/claimPreviewTile/view.jsx

@@ -17,6 +17,8 @@ import FileWatchLaterLink from 'component/fileWatchLaterLink';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import ClaimMenuList from 'component/claimMenuList';
 import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
+// $FlowFixMe cannot resolve ...
+import PlaceholderTx from 'static/img/placeholderTx.gif';
 
 type Props = {
   uri: string,
@@ -37,7 +39,6 @@ type Props = {
   }>,
   blockedChannelUris: Array<string>,
   getFile: (string) => void,
-  placeholder: boolean,
   streamingUrl: string,
   isMature: boolean,
   showMature: boolean,
@@ -170,7 +171,9 @@ function ClaimPreviewTile(props: Props) {
   if (placeholder || (!claim && isResolvingUri)) {
     return (
       <li className={classnames('claim-preview--tile', {})}>
-        <div className="placeholder media__thumb" />
+        <div className="placeholder media__thumb">
+          <img src={PlaceholderTx} alt="Placeholder" />
+        </div>
         <div className="placeholder__wrapper">
           <div className="placeholder claim-tile__title" />
           <div className="placeholder claim-tile__info" />

ui/page/channel/view.jsx

@@ -23,6 +23,8 @@ import ChannelStakedIndicator from 'component/channelStakedIndicator';
 import ClaimMenuList from 'component/claimMenuList';
 import Yrbl from 'component/yrbl';
 import I18nMessage from 'component/i18nMessage';
+// $FlowFixMe cannot resolve ...
+import PlaceholderTx from 'static/img/placeholderTx.gif';
 
 export const PAGE_VIEW_QUERY = `view`;
 const CONTENT_PAGE = 'content';
@@ -217,6 +219,7 @@ function ChannelPage(props: Props) {
           {/* TODO: add channel collections <ClaimCollectionAddButton uri={uri} fileAction /> */}
           <ClaimMenuList uri={claim.permanent_url} channelUri={claim.permanent_url} inline isChannelPage />
         </div>
+        {cover && <img className={classnames('channel-cover__custom')} src={PlaceholderTx} />}
         {cover && <img className={classnames('channel-cover__custom')} src={cover} />}
         <div className="channel__primary-info">
           <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} allowGifs hideStakedIndicator />

web/middleware/cache-control.js

@@ -14,6 +14,7 @@ const STATIC_ASSET_PATHS = [
   '/public/img/gerbil-happy.png',
   '/public/img/gerbil-sad.png',
   '/public/img/placeholder.png',
+  '/public/img/placeholderTx.gif',
   '/public/img/thumbnail-broken.png',
   '/public/img/thumbnail-missing.png',
   '/public/img/total-background.png',