fix(wallet) Fix NFT image flashing HTML broken before the image is lo…

…aded (#20302)

Fix NFT image flashing HTML broken before the image is loaded

components/brave_wallet_ui/components/desktop/views/portfolio/components/nft-grid-view/nft-grid-view-item-skeleton.stories.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { NftGridViewItemSkeleton } from "./nft-grid-view-item-skeleton"
+
+export const _NftGridViewItemSkeleton = () => {
+  return (
+    <NftGridViewItemSkeleton />
+  )
+}
+
+export default _NftGridViewItemSkeleton

components/brave_wallet_ui/components/desktop/views/portfolio/components/nft-grid-view/nft-grid-view-item-skeleton.tsx

@@ -5,15 +5,16 @@
 import * as React from 'react'
 import { LoadingSkeleton } from '../../../../../shared/loading-skeleton/index'
 import { VerticalSpace } from '../../../../../shared/style'
+import { NFTWrapper } from './style'
 
 export const NftGridViewItemSkeleton = () => {
   return (
-    <>
+    <NFTWrapper>
       <LoadingSkeleton height={222} />
       <VerticalSpace space='8px' />
       <LoadingSkeleton width='80%' height={20} />
       <VerticalSpace space='8px' />
       <LoadingSkeleton width={40} height={20} />
-    </>
+    </NFTWrapper>
   )
 }

components/brave_wallet_ui/nft/components/nft-content/nft-content.tsx

@@ -5,9 +5,6 @@
 
 import * as React from 'react'
 
-// components
-import { Image, ImageWrapper } from './nft-content-styles'
-
 // types
 import { NFTMetadataReturnType } from '../../../constants/types'
 import { DisplayMode } from '../../nft-ui-messages'
@@ -16,6 +13,8 @@ import { DisplayMode } from '../../nft-ui-messages'
 import Placeholder from '../../../assets/svg-icons/nft-placeholder.svg'
 import { NftMultimedia } from '../nft-multimedia/nft-multimedia'
 import { stripChromeImageURL } from '../../../utils/string-utils'
+import { ImageWrapper } from './nft-content-styles'
+import { ImageLoader } from '../nft-image/image-loader'
 
 interface Props {
   isLoading?: boolean
@@ -57,7 +56,7 @@ export const NftContent = (props: Props) => {
       <div ref={wrapperRef}>
         {url && displayMode === 'icon' && isInView ? (
           <ImageWrapper>
-            <Image src={url} />
+            <ImageLoader src={url} />
           </ImageWrapper>
         ) : null}
       </div>

components/brave_wallet_ui/nft/components/nft-image/image-loader.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+// styles
+import { Image } from './nft-image.styles'
+
+interface ImageLoaderProps {
+  src: string
+  width?: string
+  height?: string
+  lazyLoad?: 'lazy' | 'eager'
+  onLoaded?: () => void
+}
+
+export const ImageLoader = ({
+  src,
+  width,
+  height,
+  lazyLoad,
+  onLoaded
+}: ImageLoaderProps) => {
+  const [loaded, setLoaded] = React.useState(false)
+
+  const handleImageLoaded = () => {
+    setLoaded(true)
+    if (onLoaded) onLoaded()
+  }
+
+  return (
+    <>
+      {loaded && <Image src={src} customWidth={width} customHeight={height} />}
+      <img
+        src={src}
+        style={{ display: 'none' }}
+        loading={lazyLoad}
+        onLoad={handleImageLoaded}
+      />
+    </>
+  )
+}

components/brave_wallet_ui/nft/components/nft-image/nft-image.styles.ts

@@ -4,15 +4,19 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 import styled from 'styled-components'
 
-export const Image = styled.img`
+export const Image = styled.img<{
+  customWidth?: string
+  customHeight?: string
+}>`
   display: block;
-  width: 100%;
-  height: auto;
-  object-fit: contain;
   border: transparent;
   border-radius: 8px;
-  width: auto;
-  height: 360px;
+  max-width: 100%;
+  max-height: 100%;
+  position: relative;
+  object-fit: contain;
+  width: ${(props) => props.customWidth || 'auto'};
+  height: ${(props) => props.customHeight || 'auto'};
 `
 
 export const ImageWrapper = styled.div`

components/brave_wallet_ui/nft/components/nft-image/nft-image.tsx

@@ -4,12 +4,16 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 import * as React from 'react'
 
+// components
+import { ImageLoader } from './image-loader'
+
 // styles
+import { ImageWrapper } from './nft-image.styles'
 import {
-  ImageWrapper,
-  Image
-} from './nft-image.styles'
-import { NftUiCommand, UpdateNftImageLoadingMessage, sendMessageToWalletUi } from '../../nft-ui-messages'
+  NftUiCommand,
+  UpdateNftImageLoadingMessage,
+  sendMessageToWalletUi
+} from '../../nft-ui-messages'
 
 interface Props {
   imageUrl: string
@@ -28,10 +32,13 @@ export const NftImage = (props: Props) => {
   }, [])
 
   return (
-    <>
-      <ImageWrapper>
-        <Image src={imageUrl} onLoad={onImageLoaded} loading='lazy' />
-      </ImageWrapper>
-    </>
+    <ImageWrapper>
+      <ImageLoader
+        src={imageUrl}
+        onLoaded={onImageLoaded}
+        width='auto'
+        height='360px'
+      />
+    </ImageWrapper>
   )
 }