fix error output on asset details loading

client/src/components/templates/Asset/AssetDetails.tsx

@@ -21,18 +21,24 @@ export function datafilesLine(files: File[]) {
     return <span>{files.length} data files</span>
 }
 
-export default class AssetDetails extends PureComponent<AssetDetailsProps> {
+const Pricing = ({ price }: { price: string }) => (
-    public render() {
+    <li>
-        const { metadata, ddo } = this.props
+        <span className={styles.metaLabel}>
+            <strong>Price</strong>
+        </span>
+        <span className={styles.metaValue}>
+            {price === '0' ? 0 : Web3.utils.fromWei(price.toString())} OCEAN
+        </span>
+    </li>
+)
+
+export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
     const { base } = metadata
 
     return (
         <>
             <aside className={styles.metaPrimary}>
-                    <h2
+                <h2 className={styles.copyrightHolder} title="Copyright Holder">
-                        className={styles.copyrightHolder}
-                        title="Copyright Holder"
-                    >
                     {base.copyrightHolder}
                 </h2>
                 <div className={styles.metaPrimaryData}>
@@ -75,17 +81,13 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                         <span className={styles.metaLabel}>
                             <strong>Author</strong>
                         </span>
-                            <span className={styles.metaValue}>
+                        <span className={styles.metaValue}>{base.author}</span>
-                                {base.author}
-                            </span>
                     </li>
                     <li>
                         <span className={styles.metaLabel}>
                             <strong>License</strong>
                         </span>
-                            <span className={styles.metaValue}>
+                        <span className={styles.metaValue}>{base.license}</span>
-                                {base.license}
-                            </span>
                     </li>
                     <li>
                         <span className={styles.metaLabel}>
@@ -95,29 +97,11 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                             <code>{ddo.id}</code>
                         </span>
                     </li>
-                        {allowPricing ? (
+                    {allowPricing ? <Pricing price={base.price} /> : null}
-                            <li>
-                                <span className={styles.metaLabel}>
-                                    <strong>Price</strong>
-                                </span>
-                                <span className={styles.metaValue}>
-                                    {base.price === '0'
-                                        ? 0
-                                        : Web3.utils.fromWei(
-                                              base.price.toString()
-                                          )}{' '}
-                                    OCEAN
-                                </span>
-                            </li>
-                        ) : null}
                 </ul>
             </div>
 
-                <AssetFilesDetails
+            <AssetFilesDetails files={base.files ? base.files : []} ddo={ddo} />
-                    files={base.files ? base.files : []}
-                    ddo={ddo}
-                />
         </>
     )
 }
-}

client/src/components/templates/Asset/index.tsx

@@ -54,12 +54,13 @@ class Asset extends Component<AssetProps, AssetState> {
     public render() {
         const { metadata, ddo, error } = this.state
         const isLoading = metadata.base.name === ''
+        const hasError = error !== ''
 
-        return isLoading ? (
+        return isLoading && !hasError ? (
             <div className={stylesApp.loader}>
                 <Spinner message="Loading asset..." />
             </div>
-        ) : error !== '' ? (
+        ) : hasError ? (
             <div className={styles.error}>{error}</div>
         ) : (
             <Route