style: updating page loader for activity (#5508)

* style: updating page loader for activity

* reusing loader

src/nft/components/collection/Activity.tsx

 import { OpacityHoverState } from 'components/Common'
 import { Box } from 'nft/components/Box'
-import { LoadingSparkle } from 'nft/components/common/Loading/LoadingSparkle'
-import { Center, Column, Row } from 'nft/components/Flex'
+import { Column, Row } from 'nft/components/Flex'
 import { themeVars, vars } from 'nft/css/sprinkles.css'
 import { useBag, useIsMobile } from 'nft/hooks'
 import { ActivityFetcher } from 'nft/queries/genie/ActivityFetcher'
@@ -15,7 +14,7 @@ import styled from 'styled-components/macro'
 
 import * as styles from './Activity.css'
 import { AddressCell, BuyCell, EventCell, ItemCell, PriceCell } from './ActivityCells'
-import { ActivityLoader } from './ActivityLoader'
+import { ActivityLoader, ActivityPageLoader } from './ActivityLoader'
 
 enum ColumnHeaders {
   Item = 'Item',
@@ -155,13 +154,7 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName, chai
           <InfiniteScroll
             next={fetchNextPage}
             hasMore={!!hasNextPage}
-            loader={
-              isFetchingNextPage ? (
-                <Center paddingY="20">
-                  <LoadingSparkle />
-                </Center>
-              ) : null
-            }
+            loader={isFetchingNextPage ? <ActivityPageLoader rowCount={2} /> : null}
             dataLength={events?.length ?? 0}
             style={{ overflow: 'unset' }}
           >

src/nft/components/collection/ActivityLoader.tsx

@@ -13,12 +13,9 @@ const LoadingSliver = () => {
   return <Box className={styles.loadingSliver} />
 }
 
-export const ActivityLoader = () => {
+const ActivityLoadingRow = () => {
   return (
-    <Column marginTop="36">
-      <HeaderRow />
-      {[...Array(10)].map((_, i) => (
-        <Box as="a" className={eventRow} key={i}>
+    <Box as="a" className={eventRow}>
       <Row gap="16">
         <LoadingSquare />
         <LoadingSliver />
@@ -36,7 +33,24 @@ export const ActivityLoader = () => {
         <LoadingSliver />
       </Row>
     </Box>
+  )
+}
+
+export const ActivityPageLoader = ({ rowCount }: { rowCount: number }) => {
+  return (
+    <>
+      {[...Array(rowCount)].map((_, index) => (
+        <ActivityLoadingRow key={index} />
       ))}
+    </>
+  )
+}
+
+export const ActivityLoader = () => {
+  return (
+    <Column marginTop="36">
+      <HeaderRow />
+      <ActivityPageLoader rowCount={10} />
     </Column>
   )
 }