Merge pull request #1 from solana-labs/master

Remove client-side cache for NFT images (solana-labs#284)
gh-waybit · Aug 22, 2023 · 258a9aa · 258a9aa
2 parents 6d65c3a + 6930cce
commit 258a9aa
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 114 deletions.
diff --git a/app/components/account/nftoken/NFTokenAccountHeader.tsx b/app/components/account/nftoken/NFTokenAccountHeader.tsx
@@ -1,6 +1,6 @@
 import { InfoTooltip } from '@components/common/InfoTooltip';
 import { LoadingArtPlaceholder } from '@components/common/LoadingArtPlaceholder';
-import { CachedImageContent } from '@components/common/NFTArt';
+import { NFTImageContent } from '@components/common/NFTArt';
 import { Account } from '@providers/accounts';
 import React, { Suspense } from 'react';
 
@@ -42,7 +42,7 @@ export function NFTokenNFTHeader({ nft }: { nft: NftokenTypes.NftAccount }) {
     return (
         <div className="row">
             <div className="col-auto ms-2 d-flex align-items-center">
-                <CachedImageContent uri={metadata?.image.trim()} />
+                <NFTImageContent uri={metadata?.image.trim()} />
             </div>
 
             <div className="col mb-3 ms-0.5 mt-3">
@@ -55,9 +55,8 @@ export function NFTokenNFTHeader({ nft }: { nft: NftokenTypes.NftAccount }) {
 
                 <div>
                     <div className={'d-inline-flex align-items-center mt-2'}>
-                        <span className="badge badge-pill bg-dark">{`${
-                            nft.authority_can_update ? 'Mutable' : 'Immutable'
-                        }`}</span>
+                        <span className="badge badge-pill bg-dark">{`${nft.authority_can_update ? 'Mutable' : 'Immutable'
+                            }`}</span>
 
                         <InfoTooltip
                             bottom
@@ -80,7 +79,7 @@ export function NFTokenCollectionHeader({ collection }: { collection: NftokenTyp
     return (
         <div className="row">
             <div className="col-auto ms-2 d-flex align-items-center">
-                <CachedImageContent uri={metadata?.image} />
+                <NFTImageContent uri={metadata?.image} />
             </div>
 
             <div className="col mb-3 ms-0.5 mt-3">
@@ -93,9 +92,8 @@ export function NFTokenCollectionHeader({ collection }: { collection: NftokenTyp
 
                 <div>
                     <div className={'d-inline-flex align-items-center mt-2'}>
-                        <span className="badge badge-pill bg-dark">{`${
-                            collection.authority_can_update ? 'Mutable' : 'Immutable'
-                        }`}</span>
+                        <span className="badge badge-pill bg-dark">{`${collection.authority_can_update ? 'Mutable' : 'Immutable'
+                            }`}</span>
 
                         <InfoTooltip
                             bottom

diff --git a/app/components/account/nftoken/NFTokenAccountSection.tsx b/app/components/account/nftoken/NFTokenAccountSection.tsx
@@ -2,7 +2,6 @@ import { Address } from '@components/common/Address';
 import { TableCardBody } from '@components/common/TableCardBody';
 import { Account, useFetchAccountInfo } from '@providers/accounts';
 import { PublicKey } from '@solana/web3.js';
-import { useCachedImage } from '@utils/useCachedImage';
 import { Suspense, useState } from 'react';
 import { RefreshCw } from 'react-feather';
 
@@ -85,39 +84,32 @@ const NFTCard = ({ nft }: { nft: NftokenTypes.NftAccount }) => {
 
 export const NftokenImage = ({ url, size }: { url: string | undefined; size: number }) => {
     const [isLoading, setIsLoading] = useState<boolean>(true);
-    const { data: cachedImage, error } = useCachedImage(url || '');
 
     return (
         <>
-            {error ? (
-                <div style={{ backgroundColor: 'lightgrey', height: size, width: size }} />
-            ) : (
-                <>
-                    {isLoading && (
-                        <div
-                            style={{
-                                backgroundColor: 'lightgrey',
-                                height: size,
-                                width: size,
-                            }}
-                        />
-                    )}
-                    <div className={`rounded mx-auto ${isLoading ? 'd-none' : 'd-block'}`}>
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img
-                            alt="nft"
-                            height={size}
-                            onLoad={() => {
-                                setIsLoading(false);
-                            }}
-                            src={cachedImage?.url ?? ''}
-                            width={size}
-                        />
-                    </div>
-                </>
+            {isLoading && (
+                <div
+                    style={{
+                        backgroundColor: 'lightgrey',
+                        height: size,
+                        width: size,
+                    }}
+                />
             )}
+            <div className={`rounded mx-auto ${isLoading ? 'd-none' : 'd-block'}`}>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                    alt="nft"
+                    height={size}
+                    onLoad={() => {
+                        setIsLoading(false);
+                    }}
+                    src={url}
+                    width={size}
+                />
+            </div>
         </>
-    );
+    )
 };
 
 const CollectionCard = ({ collection }: { collection: NftokenTypes.CollectionAccount }) => {

diff --git a/app/components/common/NFTArt.tsx b/app/components/common/NFTArt.tsx
@@ -4,7 +4,6 @@ import ErrorLogo from '@img/logos-solana/dark-solana-logo.svg';
 import { MetadataJson, MetaDataJsonCategory, MetadataJsonFile } from '@metaplex/js';
 import { PublicKey } from '@solana/web3.js';
 import { getLast } from '@utils/index';
-import { useCachedImage } from '@utils/useCachedImage';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
@@ -27,59 +26,20 @@ const ViewOriginalArtContentLink = ({ src }: { src: string }) => {
     );
 };
 
-export const CachedImageContent = ({ uri }: { uri?: string }) => {
+export const NFTImageContent = ({ uri }: { uri?: string }) => {
     const [isLoading, setIsLoading] = useState(true);
-    const { data: cachedImage, error } = useCachedImage(uri || '');
-    let imageElement;
-    if (cachedImage?.__type === 'fallbackUrl') {
-        imageElement = (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-                alt="nft"
-                onLoad={() => {
-                    setIsLoading(false);
-                }}
-                src={cachedImage.url}
-                width="100%"
-            />
-        );
-    } else if (cachedImage?.__type === 'objectUrl') {
-        imageElement = (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-                alt="nft"
-                onLoad={() => {
-                    setIsLoading(false);
-                }}
-                src={cachedImage.url}
-                width="100%"
-            />
-        );
-    }
+
     return (
-        <>
-            {error ? (
-                <div className={'art-error-image-placeholder'}>
-                    <ErrorPlaceHolder />
-                    <h6 className={'header-pretitle mt-2'}>Error Loading Image</h6>
-                </div>
-            ) : (
-                <div style={{ maxHeight: 200, width: 150 }}>
-                    {isLoading && <LoadingArtPlaceholder />}
-                    {imageElement && (
-                        <>
-                            <div
-                                className={`rounded mx-auto ${isLoading ? 'd-none' : 'd-block'}`}
-                                style={{ overflow: 'hidden' }}
-                            >
-                                {imageElement}
-                            </div>
-                        </>
-                    )}
-                    {!isLoading && uri && <ViewOriginalArtContentLink src={uri} />}
-                </div>
-            )}
-        </>
+        <div style={{ maxHeight: 200, width: 150 }}>
+            {isLoading && <LoadingArtPlaceholder />}
+            <div
+                className={`rounded mx-auto ${isLoading ? 'd-none' : 'd-block'}`}
+                style={{ overflow: 'hidden' }}
+            >
+                <img alt="nft" src={uri} width="100%" onLoad={() => setIsLoading(false)} />
+            </div>
+            {!isLoading && uri && <ViewOriginalArtContentLink src={uri} />}
+        </div>
     );
 };
 
@@ -220,7 +180,7 @@ export const ArtContent = ({
         ) : category === 'html' || animationUrlExt === 'html' ? (
             <HTMLContent animationUrl={animationURL} files={files} />
         ) : (
-            <CachedImageContent uri={uri} />
+            <NFTImageContent uri={uri} />
         );
 
     return (

diff --git a/app/utils/useCachedImage.ts b/app/utils/useCachedImage.ts