thumbnail fix

ui/component/collectionPreviewTile/view.jsx

@@ -3,13 +3,13 @@ import React from 'react';
 import classnames from 'classnames';
 import { NavLink, useHistory } from 'react-router-dom';
 import ClaimPreviewTile from 'component/claimPreviewTile';
-import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
 import TruncatedText from 'component/common/truncated-text';
 import CollectionCount from './collectionCount';
 import CollectionPrivate from './collectionPrivate';
 import CollectionMenuList from 'component/collectionMenuList';
 import { formatLbryUrlForWeb } from 'util/url';
 import { COLLECTIONS_CONSTS } from 'lbry-redux';
+import FileThumbnail from 'component/fileThumbnail';
 
 type Props = {
   uri: string,
@@ -141,16 +141,13 @@ function CollectionPreviewTile(props: Props) {
   return (
     <li role="link" onClick={handleClick} className={'card claim-preview--tile'}>
       <NavLink {...navLinkProps}>
-        <div className={classnames('media__thumb')}>
+        <FileThumbnail uri={collectionItemUrls && collectionItemUrls.length && collectionItemUrls[0]}>
           <React.Fragment>
-            <div className="claim-preview__collection-wrapper">
-              <CollectionPreviewOverlay collectionId={collectionId} />
-            </div>
             <div className="claim-preview__claim-property-overlay">
               <CollectionCount count={collectionCount} />
             </div>
           </React.Fragment>
-        </div>
+        </FileThumbnail>
       </NavLink>
       <NavLink {...navLinkProps}>
         <h2 className="claim-tile__title">

ui/component/fileThumbnail/thumb.jsx

@@ -0,0 +1,24 @@
+// @flow
+import React from 'react';
+import classnames from 'classnames';
+import type { Node } from 'react';
+import useLazyLoading from 'effects/use-lazy-loading';
+
+type Props = {
+  thumb: string,
+  children?: Node,
+};
+
+const Thumb = (props: Props) => {
+  const { thumb, children } = props;
+  const thumbnailRef = React.useRef(null);
+  useLazyLoading(thumbnailRef);
+
+  return (
+    <div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb')}>
+      {children}
+    </div>
+  );
+};
+
+export default Thumb;

ui/component/fileThumbnail/view.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
 import classnames from 'classnames';
-import useLazyLoading from 'effects/use-lazy-loading';
+import Thumb from './thumb';
 
 type Props = {
   uri: string,
@@ -24,7 +24,6 @@ function FileThumbnail(props: Props) {
     uri && claim && claim.value && claim.value.thumbnail ? claim.value.thumbnail.url : undefined;
   const thumbnail = passedThumbnail || thumbnailFromClaim;
   const hasResolvedClaim = claim !== undefined;
-  const thumbnailRef = React.useRef(null);
 
   React.useEffect(() => {
     if (!hasResolvedClaim && uri) {
@@ -32,8 +31,6 @@ function FileThumbnail(props: Props) {
     }
   }, [hasResolvedClaim, uri, doResolveUri]);
 
-  useLazyLoading(thumbnailRef);
-
   if (!allowGifs && thumbnail && thumbnail.endsWith('gif')) {
     return (
       <FreezeframeWrapper src={thumbnail} className={classnames('media__thumb', className)}>
@@ -52,23 +49,11 @@ function FileThumbnail(props: Props) {
 
   const thumnailUrl = url ? url.replace(/'/g, "\\'") : '';
 
-  if (!hasResolvedClaim) {
-    return (
-      <div
-        ref={thumbnailRef}
-        data-background-image={thumnailUrl}
-        className={classnames('media__thumb', className, {
-          'media__thumb--resolving': !hasResolvedClaim,
-        })}
-      >
-        {children}
-      </div>
-    );
+  if (hasResolvedClaim || thumnailUrl) {
+    return <Thumb thumb={thumnailUrl}>{children}</Thumb>;
   }
   return (
     <div
-      ref={thumbnailRef}
-      data-background-image={thumnailUrl}
       className={classnames('media__thumb', className, {
         'media__thumb--resolving': !hasResolvedClaim,
       })}