fix: use same loader in view my nfts as collection (#5428)

* loader

* fix

src/nft/components/collection/CollectionNfts.tsx

@@ -127,7 +127,7 @@ export const ClearAllButton = styled.button`
   background: none;
 `
 
-const InfiniteScrollWrapper = styled.div`
+export const InfiniteScrollWrapper = styled.div`
   ${InfiniteScrollWrapperCss}
 `
 
@@ -168,9 +168,9 @@ const MarketNameWrapper = styled(Row)`
   gap: 8px;
 `
 
-const LoadingAssets = () => (
+export const LoadingAssets = ({ count }: { count?: number }) => (
   <>
-    {Array.from(Array(ASSET_PAGE_SIZE), (_, index) => (
+    {Array.from(Array(count ?? ASSET_PAGE_SIZE), (_, index) => (
       <CollectionAssetLoading key={index} />
     ))}
   </>

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

 import { useNftBalanceQuery } from 'graphql/data/nft/NftBalance'
 import { AnimatedBox, Box } from 'nft/components/Box'
-import { ClearAllButton } from 'nft/components/collection/CollectionNfts'
+import { ClearAllButton, LoadingAssets } from 'nft/components/collection/CollectionNfts'
 import { assetList } from 'nft/components/collection/CollectionNfts.css'
 import { FilterButton } from 'nft/components/collection/FilterButton'
-import { LoadingSparkle } from 'nft/components/common/Loading/LoadingSparkle'
-import { Center, Column, Row } from 'nft/components/Flex'
+import { Column, Row } from 'nft/components/Flex'
 import { CrossIcon } from 'nft/components/icons'
 import { FilterSidebar } from 'nft/components/profile/view/FilterSidebar'
 import { subhead } from 'nft/css/common.css'
@@ -201,6 +200,7 @@ const ProfilePageNfts = ({
     walletAssets: ownerAssets,
     loadNext,
     hasNext,
+    isLoadingNext,
   } = useNftBalanceQuery(address, collectionFilters, [], DEFAULT_WALLET_ASSET_QUERY_AMOUNT)
 
   const { gridX } = useSpring({
@@ -245,27 +245,24 @@ const ProfilePageNfts = ({
             next={() => loadNext(DEFAULT_WALLET_ASSET_QUERY_AMOUNT)}
             hasMore={hasNext}
             loader={
-              <Center>
-                <LoadingSparkle />
-              </Center>
+              Boolean(hasNext && ownerAssets?.length) && <LoadingAssets count={DEFAULT_WALLET_ASSET_QUERY_AMOUNT} />
             }
             dataLength={ownerAssets?.length ?? 0}
+            className={ownerAssets?.length || isLoadingNext ? assetList : undefined}
             style={{ overflow: 'unset' }}
           >
-            <div className={assetList}>
-              {ownerAssets?.length
-                ? ownerAssets.map((asset, index) => (
-                    <div key={index}>
-                      <ViewMyNftsAsset
-                        asset={asset}
-                        mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
-                        setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
-                        hideDetails={sellAssets.length > 0}
-                      />
-                    </div>
-                  ))
-                : null}
-            </div>
+            {ownerAssets?.length
+              ? ownerAssets.map((asset, index) => (
+                  <div key={index}>
+                    <ViewMyNftsAsset
+                      asset={asset}
+                      mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
+                      setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
+                      hideDetails={sellAssets.length > 0}
+                    />
+                  </div>
+                ))
+              : null}
           </InfiniteScroll>
         </AnimatedBox>
       )}