fix: collectionNft called before intialized (#5815)

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/collection/CollectionAssetLoading.tsx

+import { ASSET_PAGE_SIZE } from 'graphql/data/nft/Asset'
 import { loadingAsset } from 'nft/css/loading.css'
 
 import SizingImage from '../../../assets/images/sizingImage.png'
@@ -5,7 +6,7 @@ import { Box } from '../../components/Box'
 import { Row } from '../Flex'
 import * as styles from './CollectionAssetLoading.css'
 
-export const CollectionAssetLoading = ({ height }: { height?: number }) => {
+const CollectionAssetLoading = ({ height }: { height?: number }) => {
   return (
     <Box as="div" className={styles.collectionAssetLoading}>
       <Box as="div" position="relative" width="full" style={{ height }}>
@@ -21,3 +22,11 @@ export const CollectionAssetLoading = ({ height }: { height?: number }) => {
     </Box>
   )
 }
+
+export const LoadingAssets = ({ count, height }: { count?: number; height?: number }) => (
+  <>
+    {Array.from(Array(count ?? ASSET_PAGE_SIZE), (_, index) => (
+      <CollectionAssetLoading key={index} height={height} />
+    ))}
+  </>
+)

src/nft/components/collection/CollectionNfts.tsx

@@ -55,8 +55,9 @@ import { useLocation } from 'react-router-dom'
 import styled, { css } from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
-import { CollectionAssetLoading } from './CollectionAssetLoading'
+import { LoadingAssets } from './CollectionAssetLoading'
 import { MARKETPLACE_ITEMS, MarketplaceLogo } from './MarketplaceSelect'
+import { ClearAllButton } from './shared'
 import { Sweep } from './Sweep'
 import { TraitChip } from './TraitChip'
 
@@ -120,17 +121,6 @@ const ViewFullCollection = styled.span`
   ${OpacityHoverState}
 `
 
-export const ClearAllButton = styled.button`
-  color: ${({ theme }) => theme.textTertiary};
-  padding-left: 8px;
-  padding-right: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  border: none;
-  cursor: pointer;
-  background: none;
-`
-
 const InfiniteScrollWrapper = styled.div`
   ${InfiniteScrollWrapperCss}
 `
@@ -172,14 +162,6 @@ const MarketNameWrapper = styled(Row)`
   gap: 8px;
 `
 
-export const LoadingAssets = ({ count, height }: { count?: number; height?: number }) => (
-  <>
-    {Array.from(Array(count ?? ASSET_PAGE_SIZE), (_, index) => (
-      <CollectionAssetLoading key={index} height={height} />
-    ))}
-  </>
-)
-
 const CollectionNftsLoading = ({ height }: { height?: number }) => (
   <Box width="full" className={styles.assetList}>
     <LoadingAssets height={height} />

src/nft/components/collection/shared.tsx

+import styled from 'styled-components/macro'
+
+export const ClearAllButton = styled.button`
+  color: ${({ theme }) => theme.textTertiary};
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  background: none;
+`

src/nft/components/profile/view/ProfilePage.tsx

 import { useNftBalance } from 'graphql/data/nft/NftBalance'
 import { AnimatedBox, Box } from 'nft/components/Box'
-import { ClearAllButton, LoadingAssets } from 'nft/components/collection/CollectionNfts'
+import { LoadingAssets } from 'nft/components/collection/CollectionAssetLoading'
 import { assetList } from 'nft/components/collection/CollectionNfts.css'
 import { FilterButton } from 'nft/components/collection/FilterButton'
+import { ClearAllButton } from 'nft/components/collection/shared'
 import { Column, Row } from 'nft/components/Flex'
 import { CrossIcon } from 'nft/components/icons'
 import { FilterSidebar } from 'nft/components/profile/view/FilterSidebar'