chore: merging loading states part 1 (#4626)

* Part 1 of merging in loading states
Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

src/nft/components/collection/CollectionAssetLoading.css.ts

+import { style } from '@vanilla-extract/css'
+import { loadingAsset } from 'nft/css/loading.css'
+
+import { sprinkles } from '../../css/sprinkles.css'
+
+export const collectionAssetLoading = style([
+  sprinkles({
+    borderRadius: '12',
+    paddingBottom: '12',
+    backgroundColor: 'backgroundSurface',
+  }),
+])
+
+export const collectionAssetsImageLoading = style([
+  loadingAsset,
+  sprinkles({
+    position: 'absolute',
+    height: 'full',
+    width: 'full',
+  }),
+])

src/nft/components/collection/CollectionAssetLoading.tsx

+import { loadingAsset } from 'nft/css/loading.css'
+
+import SizingImage from '../../../assets/images/sizingImage.png'
+import { Box } from '../../components/Box'
+import { Row } from '../Flex'
+import * as styles from './CollectionAssetLoading.css'
+
+export const CollectionAssetLoading = () => {
+  return (
+    <Box as="div" className={styles.collectionAssetLoading}>
+      <Box as="div" position="relative" width="full">
+        <Box as="div" className={styles.collectionAssetsImageLoading} />
+        <Box as="img" width="full" opacity="0" src={SizingImage} draggable={false} />
+      </Box>
+      <Row justifyContent="space-between" marginTop="12" paddingLeft="12" paddingRight="12">
+        <Box as="div" className={loadingAsset} height="12" width="120"></Box>
+        <Box as="div" className={loadingAsset} width="36" height="12"></Box>
+      </Row>
+      <Row justifyContent="space-between" marginTop="12" paddingLeft="12" paddingRight="12">
+        <Box as="div" className={loadingAsset} height="16" width="80"></Box>
+        <Box as="div" className={loadingAsset} width="16" height="16" borderRadius="4"></Box>
+      </Row>
+      <Row marginTop="12" paddingLeft="12" paddingRight="12">
+        <Box as="div" className={loadingAsset} width="full" height="32"></Box>
+      </Row>
+    </Box>
+  )
+}

src/nft/components/collection/CollectionNfts.tsx

@@ -26,6 +26,8 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery } from 'react-query'
 import { useLocation } from 'react-router-dom'
 
+import { CollectionAssetLoading } from './CollectionAssetLoading'
+
 interface CollectionNftsProps {
   contractAddress: string
   collectionStats: GenieCollection
@@ -64,7 +66,6 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
         markets,
         notForSale: !buyNow,
         sortBy,
-        searchByNameText,
         debouncedMinPrice,
         debouncedMaxPrice,
         searchText: debouncedSearchByNameText,
@@ -126,6 +127,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
     return collectionAssets.pages.flat()
   }, [collectionAssets, AssetsFetchSuccess])
 
+  const loadingAssets = useMemo(() => <>{new Array(25).fill(<CollectionAssetLoading />)}</>, [])
   const hasRarity = getRarityStatus(rarityStatusCache, collectionStats?.address, collectionNfts)
 
   const sortDropDownOptions: DropDownOption[] = useMemo(
@@ -181,6 +183,25 @@ 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 hasNfts = collectionNfts && collectionNfts.length > 0
+
   useEffect(() => {
     const marketCount: any = {}
     collectionStats?.marketplaceCount?.forEach(({ marketplace, count }) => {
@@ -233,29 +254,16 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
       <InfiniteScroll
         next={fetchNextPage}
         hasMore={hasNextPage ?? false}
-        loader={hasNextPage ? <p>Loading from scroll...</p> : null}
+        loader={hasNextPage ? loadingAssets : null}
         dataLength={collectionNfts?.length ?? 0}
         style={{ overflow: 'unset' }}
+        className={hasNfts || isLoading ? styles.assetList : undefined}
       >
-        {collectionNfts && collectionNfts.length > 0 ? (
-          <div className={styles.assetList}>
-            {collectionNfts.map((asset) => {
-              return asset ? (
-                <CollectionAsset
-                  key={asset.address + asset.tokenId}
-                  asset={asset}
-                  isMobile={isMobile}
-                  uniformHeight={uniformHeight}
-                  setUniformHeight={setUniformHeight}
-                  mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
-                  setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
-                  rarityVerified={rarityVerified}
-                />
-              ) : null
-            })}
-          </div>
-        ) : (
-          !isLoading && (
+        {hasNfts
+          ? Nfts
+          : isLoading
+          ? loadingAssets
+          : !isLoading && (
               <Center width="full" color="textSecondary" style={{ height: '60vh' }}>
                 <div style={{ display: 'block', textAlign: 'center' }}>
                   <p className={headlineMedium}>No NFTS found</p>
@@ -264,7 +272,6 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
                   </Box>
                 </div>
               </Center>
-          )
             )}
       </InfiniteScroll>
     </>

src/nft/components/common/SortDropdown/SortDropdown.tsx

@@ -82,8 +82,9 @@ export const SortDropdown = ({
                   dropDownOptions[selectedIndex].reverseOnClick?.()
                   toggleReversed()
                 } else {
-                  dropDownOptions[dropDownOptions[selectedIndex].reverseIndex ?? 1 - 1].onClick()
-                  setSelectedIndex(dropDownOptions[selectedIndex].reverseIndex ?? 1 - 1)
+                  const dropdownIndex = dropDownOptions[selectedIndex].reverseIndex ?? 1
+                  dropDownOptions[dropdownIndex - 1].onClick()
+                  setSelectedIndex(dropdownIndex - 1)
                 }
               }}
             >

src/nft/css/loading.css.ts

 import { keyframes, style } from '@vanilla-extract/css'
 import { darken } from 'polished'
 
+import { sprinkles } from './sprinkles.css'
+
 export const loadingAnimation = keyframes({
   '0%': {
     backgroundPosition: '100% 50%',
@@ -19,3 +21,15 @@ export const loadingBlock = style([
     willChange: 'background-position',
   },
 ])
+
+export const loadingAsset = style([
+  loadingBlock,
+  sprinkles({
+    borderRadius: '12',
+    cursor: 'default',
+    color: 'transparent',
+  }),
+  {
+    userSelect: 'none',
+  },
+])

src/nft/css/sprinkles.css.ts

@@ -68,6 +68,7 @@ const dimensions = {
   '60': '60px',
   '64': '64px',
   '72': '72px',
+  '80': '80px',
   '100': '100px',
   '120': '120px',
   '160': '160px',