client/scss/_asset-preview.scss

@@ -1,3 +1,7 @@
+.asset-preview {
+  position: relative;
+}
+
 .asset-preview__image {
   width  : 100%;
   padding: 0;

client/scss/_claim-pending.scss

@@ -0,0 +1,12 @@
+.claim-pending {
+  display: inline-block;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  border: 2px solid red;
+  color: red;
+  font-weight: bold;
+  background-color: white;
+}

client/scss/all.scss

@@ -18,6 +18,7 @@
 @import '~scss/_button';
 @import '~scss/_button-primary';
 @import '~scss/_button-secondary';
+@import '~scss/_claim-pending';
 @import '~scss/_click-to-copy';
 @import '~scss/_form-feedback';
 @import '~scss/_horizontal-split';

client/src/components/AssetPreview/index.jsx

@@ -2,8 +2,14 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import createCanonicalLink from '../../../../utils/createCanonicalLink';
 
+const ClaimPending = () => {
+  return (
+    <div className='claim-pending'>PENDING</div>
+  );
+};
+
 const AssetPreview = ({ defaultThumbnail, claimData }) => {
-  const {name, fileExt, contentType, thumbnail, title} = claimData;
+  const {name, fileExt, contentType, thumbnail, title, pending} = claimData;
   const showUrl = createCanonicalLink({asset: {...claimData}});
   const embedUrl = `${showUrl}.${fileExt}`;
   switch (contentType) {

client/src/containers/AssetDisplay/view.jsx

@@ -46,7 +46,7 @@ class AssetDisplay extends React.Component {
   }
   render () {
     const { status, error, asset } = this.props;
-    const { name, claimData: { claimId, contentType, thumbnail, outpoint } } = asset;
+    const { name, claimData: { claimId, contentType, thumbnail, outpoint, pending } } = asset;
     // the outpoint is added to force the browser to re-download the asset after an update
     // issue: https://github.com/lbryio/spee.ch/issues/607
     let fileExt;
@@ -68,7 +68,12 @@ class AssetDisplay extends React.Component {
           <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
         </div>
         }
-        {(status === ERROR) &&
+        {(status === ERROR) && (
+          pending ? (
+            <div>
+              <p>This content is pending confirmation on the LBRY blockchain. It should be available in the next few minutes, please check back or refresh.</p>
+            </div>
+          ) : (
             <div>
               <Row>
                 <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the following error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
@@ -77,7 +82,8 @@ class AssetDisplay extends React.Component {
                 <p id='error-message'><i>{error}</i></p>
               </Row>
             </div>
-        }
+          )
+        )}
         {(status === AVAILABLE) &&
         <AvailableContent
           contentType={contentType}

server/controllers/api/channel/claims/getChannelClaims.js

@@ -17,6 +17,12 @@ const getChannelClaims = async (channelName, channelShortId, page) => {
     channelClaims = await chainquery.claim.queries.getAllChannelClaims(channelId, params);
   }
 
+  const split = channelClaims.reduce(
+    (acc, val) => val.dataValues.height === 0 ? { ...acc, zero: acc.zero.concat(val) } : { ...acc, nonzero: acc.nonzero.concat(val) },
+    { zero: [], nonzero: [] }
+  );
+  channelClaims = split.zero.concat(split.nonzero);
+
   const processingChannelClaims = channelClaims ? channelClaims.map((claim) => getClaimData(claim)) : [];
   const processedChannelClaims = await Promise.all(processingChannelClaims);
 

server/utils/getClaimData.js

@@ -28,5 +28,6 @@ module.exports = async (data) => {
     thumbnail  : data.generated_thumbnail || data.thumbnail_url || data.thumbnail,
     outpoint   : data.transaction_hash_id || data.outpoint,
     host,
+    pending: Boolean(data.height === 0),
   });
 };