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,9 +267,11 @@ const Image = ({ uniformHeight, setUniformHeight }: ImageProps) => {
             if (uniformHeight === UniformHeights.unset) {
               setUniformHeight(e.currentTarget.clientHeight)
             } else if (uniformHeight !== UniformHeights.notUniform && e.currentTarget.clientHeight !== uniformHeight) {
+              if (!uniformHeight || Math.abs(uniformHeight - e.currentTarget.clientHeight) > 1) {
                 setUniformHeight(UniformHeights.notUniform)
               }
             }
+          }
           setLoaded(true)
         }}
         className={clsx(hovered && !isMobile && styles.cardImageHover, !loaded && styles.loadingBackground)}
@@ -422,9 +424,11 @@ const Audio = ({ uniformHeight, setUniformHeight, shouldPlay, setCurrentTokenPla
                 uniformHeight !== UniformHeights.notUniform &&
                 e.currentTarget.clientHeight !== uniformHeight
               ) {
+                if (!uniformHeight || Math.abs(uniformHeight - e.currentTarget.clientHeight) > 1) {
                   setUniformHeight(UniformHeights.notUniform)
                 }
               }
+            }
             setImageLoaded(true)
           }}
           className={clsx(hovered && !isMobile && styles.cardImageHover, !imageLoaded && styles.loadingBackground)}

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,10 +323,9 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
     }
   }, [contractAddress])
 
-  const Nfts =
-    collectionNfts &&
-    collectionNfts.map((asset) =>
-      asset ? (
+  const assets = useMemo(() => {
+    if (!collectionNfts) return null
+    return collectionNfts.map((asset) => (
       <CollectionAsset
         key={asset.address + asset.tokenId}
         asset={asset}
@@ -337,8 +336,8 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
         setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
         rarityVerified={rarityVerified}
       />
-      ) : null
-    )
+    ))
+  }, [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>