fix: enforce uniform asset height (#5181)

* fix: show loading assets at uniform height

* fix: enforce the uniform asset height

* fix: memoize assets

* fix: be more lenient with uniformHeight

* fix: simplify mapping

src/nft/components/collection/Card.tsx

@@ -267,7 +267,9 @@ const Image = ({ uniformHeight, setUniformHeight }: ImageProps) => {
             if (uniformHeight === UniformHeights.unset) {
               setUniformHeight(e.currentTarget.clientHeight)
             } else if (uniformHeight !== UniformHeights.notUniform && e.currentTarget.clientHeight !== uniformHeight) {
-              setUniformHeight(UniformHeights.notUniform)
+              if (!uniformHeight || Math.abs(uniformHeight - e.currentTarget.clientHeight) > 1) {
+                setUniformHeight(UniformHeights.notUniform)
+              }
             }
           }
           setLoaded(true)
@@ -422,7 +424,9 @@ const Audio = ({ uniformHeight, setUniformHeight, shouldPlay, setCurrentTokenPla
                 uniformHeight !== UniformHeights.notUniform &&
                 e.currentTarget.clientHeight !== uniformHeight
               ) {
-                setUniformHeight(UniformHeights.notUniform)
+                if (!uniformHeight || Math.abs(uniformHeight - e.currentTarget.clientHeight) > 1) {
+                  setUniformHeight(UniformHeights.notUniform)
+                }
               }
             }
             setImageLoaded(true)

src/nft/components/collection/CollectionAssetLoading.tsx

@@ -5,10 +5,10 @@ import { Box } from '../../components/Box'
 import { Row } from '../Flex'
 import * as styles from './CollectionAssetLoading.css'
 
-export const CollectionAssetLoading = () => {
+export const CollectionAssetLoading = ({ height }: { height?: number }) => {
   return (
     <Box as="div" className={styles.collectionAssetLoading}>
-      <Box as="div" position="relative" width="full">
+      <Box as="div" position="relative" width="full" style={{ height }}>
         <Box as="div" className={styles.collectionAssetsImageLoading} />
         <Box as="img" width="full" opacity="0" src={SizingImage} draggable={false} />
       </Box>

src/nft/components/collection/CollectionNfts.tsx

@@ -166,17 +166,17 @@ export const LoadingButton = styled.div`
   background-size: 400%;
 `
 
-const loadingAssets = (
+const loadingAssets = (height?: number) => (
   <>
     {Array.from(Array(ASSET_PAGE_SIZE), (_, index) => (
-      <CollectionAssetLoading key={index} />
+      <CollectionAssetLoading key={index} height={height} />
     ))}
   </>
 )
 
 export const CollectionNftsLoading = () => (
   <Box width="full" className={styles.assetList}>
-    {loadingAssets}
+    {loadingAssets()}
   </Box>
 )
 
@@ -323,22 +323,21 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
     }
   }, [contractAddress])
 
-  const Nfts =
-    collectionNfts &&
-    collectionNfts.map((asset) =>
-      asset ? (
-        <CollectionAsset
-          key={asset.address + asset.tokenId}
-          asset={asset}
-          isMobile={isMobile}
-          uniformHeight={uniformHeight}
-          setUniformHeight={setUniformHeight}
-          mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
-          setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
-          rarityVerified={rarityVerified}
-        />
-      ) : null
-    )
+  const assets = useMemo(() => {
+    if (!collectionNfts) return null
+    return collectionNfts.map((asset) => (
+      <CollectionAsset
+        key={asset.address + asset.tokenId}
+        asset={asset}
+        isMobile={isMobile}
+        uniformHeight={uniformHeight}
+        setUniformHeight={setUniformHeight}
+        mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
+        setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
+        rarityVerified={rarityVerified}
+      />
+    ))
+  }, [collectionNfts, currentTokenPlayingMedia, isMobile, rarityVerified, uniformHeight])
 
   const hasNfts = collectionNfts && collectionNfts.length > 0
   const hasErc1155s = hasNfts && collectionNfts[0] && collectionNfts[0].tokenType === TokenType.ERC1155
@@ -509,13 +508,13 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
       <InfiniteScroll
         next={() => loadNext(ASSET_PAGE_SIZE)}
         hasMore={hasNext}
-        loader={hasNext && hasNfts ? loadingAssets : null}
+        loader={hasNext && hasNfts ? loadingAssets(uniformHeight) : null}
         dataLength={collectionNfts?.length ?? 0}
         style={{ overflow: 'unset' }}
         className={hasNfts || isLoadingNext ? styles.assetList : undefined}
       >
         {hasNfts ? (
-          Nfts
+          assets
         ) : collectionNfts?.length === 0 ? (
           <Center width="full" color="textSecondary" textAlign="center" style={{ height: '60vh' }}>
             <EmptyCollectionWrapper>