style: adding loading state for asset activity (#5503)

* style: adding loading state for asset activity

* translations

* previous translations did not work

src/nft/components/details/AssetActivity.tsx

+import { Trans } from '@lingui/macro'
 import { OpacityHoverState, ScrollBarStyles } from 'components/Common'
+import { LoadingBubble } from 'components/Tokens/loading'
+import { EventCell, MarketplaceIcon } from 'nft/components/collection/ActivityCells'
 import { ActivityEventResponse } from 'nft/types'
 import { shortenAddress } from 'nft/utils/address'
 import { formatEthPrice } from 'nft/utils/currency'
 import { getTimeDifference } from 'nft/utils/date'
 import { putCommas } from 'nft/utils/putCommas'
+import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 
-import { EventCell } from '../collection/ActivityCells'
-import { MarketplaceIcon } from '../collection/ActivityCells'
-
 const TR = styled.tr`
   border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
   width: 100%;
@@ -84,20 +85,71 @@ const ActivityContainer = styled.div`
   ${ScrollBarStyles}
 `
 
-const AssetActivity = ({ eventsData }: { eventsData: ActivityEventResponse | undefined }) => {
+const LoadingCell = styled(LoadingBubble)`
+  height: 20px;
+  width: 80px;
+`
+
+const ActivityTable = ({ children }: { children: ReactNode }) => {
   return (
     <ActivityContainer id="activityContainer">
       <Table>
         <thead>
           <TR>
-            <TH>Event</TH>
-            <TH>Price</TH>
-            <TH>By</TH>
-            <TH>To</TH>
-            <TH>Time</TH>
+            <TH>
+              <Trans>Event</Trans>
+            </TH>
+            <TH>
+              <Trans>Price</Trans>
+            </TH>
+            <TH>
+              <Trans>By</Trans>
+            </TH>
+            <TH>
+              <Trans>To</Trans>
+            </TH>
+            <TH>
+              <Trans>Time</Trans>
+            </TH>
           </TR>
         </thead>
-        <tbody>
+        <tbody>{children}</tbody>
+      </Table>
+    </ActivityContainer>
+  )
+}
+
+const LoadingAssetActivityRow = ({ cellCount }: { cellCount: number }) => {
+  return (
+    <TR>
+      {Array(cellCount)
+        .fill(null)
+        .map((_, index) => {
+          return (
+            <TD key={index}>
+              <LoadingCell />
+            </TD>
+          )
+        })}
+    </TR>
+  )
+}
+
+export const LoadingAssetActivity = ({ rowCount }: { rowCount: number }) => {
+  return (
+    <ActivityTable>
+      {Array(rowCount)
+        .fill(null)
+        .map((_, index) => {
+          return <LoadingAssetActivityRow key={index} cellCount={5} />
+        })}
+    </ActivityTable>
+  )
+}
+
+const AssetActivity = ({ eventsData }: { eventsData: ActivityEventResponse | undefined }) => {
+  return (
+    <ActivityTable>
       {eventsData?.events &&
         eventsData.events.map((event, index) => {
           const { eventTimestamp, eventType, fromAddress, marketplace, price, toAddress, transactionHash } = event
@@ -124,11 +176,7 @@ const AssetActivity = ({ eventsData }: { eventsData: ActivityEventResponse | und
 
               <TD>
                 {fromAddress && (
-                      <Link
-                        href={`https://etherscan.io/address/${fromAddress}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
+                  <Link href={`https://etherscan.io/address/${fromAddress}`} target="_blank" rel="noopener noreferrer">
                     {shortenAddress(fromAddress, 2, 4)}
                   </Link>
                 )}
@@ -136,11 +184,7 @@ const AssetActivity = ({ eventsData }: { eventsData: ActivityEventResponse | und
 
               <TD>
                 {toAddress && (
-                      <Link
-                        href={`https://etherscan.io/address/${toAddress}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
+                  <Link href={`https://etherscan.io/address/${toAddress}`} target="_blank" rel="noopener noreferrer">
                     {shortenAddress(toAddress, 2, 4)}
                   </Link>
                 )}
@@ -149,9 +193,7 @@ const AssetActivity = ({ eventsData }: { eventsData: ActivityEventResponse | und
             </TR>
           )
         })}
-        </tbody>
-      </Table>
-    </ActivityContainer>
+    </ActivityTable>
   )
 }
 

src/nft/components/details/AssetDetails.tsx

@@ -22,7 +22,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 
-import AssetActivity from './AssetActivity'
+import AssetActivity, { LoadingAssetActivity } from './AssetActivity'
 import * as styles from './AssetDetails.css'
 import DetailsContainer from './DetailsContainer'
 import InfoContainer from './InfoContainer'
@@ -312,6 +312,7 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
     hasNextPage,
     isFetchingNextPage,
     isSuccess,
+    isLoading: isActivityLoading,
   } = useInfiniteQuery<ActivityEventResponse>(
     [
       'collectionActivity',
@@ -410,16 +411,17 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
             <Filter eventType={ActivityEventType.Transfer} />
             <Filter eventType={ActivityEventType.CancelListing} />
           </ActivitySelectContainer>
+          {isActivityLoading && <LoadingAssetActivity rowCount={10} />}
           {events && events.length > 0 ? (
             <InfiniteScroll
               next={fetchNextPage}
               hasMore={!!hasNextPage}
               loader={
-                isFetchingNextPage ? (
+                isFetchingNextPage && (
                   <Center>
                     <LoadingSparkle />
                   </Center>
-                ) : null
+                )
               }
               dataLength={events?.length ?? 0}
               scrollableTarget="activityContainer"
@@ -427,12 +429,16 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
               <AssetActivity eventsData={{ events }} />
             </InfiniteScroll>
           ) : (
+            <>
+              {!isActivityLoading && (
                 <EmptyActivitiesContainer>
                   <div>No activities yet</div>
                   <Link to={`/nfts/collection/${asset.address}`}>View collection items</Link>{' '}
                 </EmptyActivitiesContainer>
               )}
             </>
+          )}
+        </>
       </InfoContainer>
       <InfoContainer primaryHeader="Description" defaultOpen secondaryHeader={null}>
         <>