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,30 +13,44 @@ const LoadingSliver = () => {
   return <Box className={styles.loadingSliver} />
 }
 
+const ActivityLoadingRow = () => {
+  return (
+    <Box as="a" className={eventRow}>
+      <Row gap="16">
+        <LoadingSquare />
+        <LoadingSliver />
+      </Row>
+      <Row>
+        <LoadingSliver />
+      </Row>
+      <Row display={{ sm: 'none', md: 'flex' }}>
+        <LoadingSliver />
+      </Row>
+      <Row display={{ sm: 'none', lg: 'flex' }}>
+        <LoadingSliver />
+      </Row>
+      <Row display={{ sm: 'none', xl: 'flex' }}>
+        <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 />
-      {[...Array(10)].map((_, i) => (
-        <Box as="a" className={eventRow} key={i}>
-          <Row gap="16">
-            <LoadingSquare />
-            <LoadingSliver />
-          </Row>
-          <Row>
-            <LoadingSliver />
-          </Row>
-          <Row display={{ sm: 'none', md: 'flex' }}>
-            <LoadingSliver />
-          </Row>
-          <Row display={{ sm: 'none', lg: 'flex' }}>
-            <LoadingSliver />
-          </Row>
-          <Row display={{ sm: 'none', xl: 'flex' }}>
-            <LoadingSliver />
-          </Row>
-        </Box>
-      ))}
+      <ActivityPageLoader rowCount={10} />
     </Column>
   )
 }