fix: add padding to LoadingRow (#4931)

* fix: add padding to LoadingRow

* remove sortable on header

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -314,10 +314,8 @@ export const HEADER_DESCRIPTIONS: Record<TokenSortMethod, ReactNode | undefined>
 /* Get singular header cell for header row */
 function HeaderCell({
   category,
-  sortable,
 }: {
   category: TokenSortMethod // TODO: change this to make it work for trans
-  sortable: boolean
 }) {
   const theme = useTheme()
   const sortAscending = useAtomValue(sortAscendingAtom)
@@ -390,17 +388,17 @@ export function HeaderRow() {
       header={true}
       listNumber="#"
       tokenInfo={<Trans>Token name</Trans>}
-      price={<HeaderCell category={TokenSortMethod.PRICE} sortable />}
-      percentChange={<HeaderCell category={TokenSortMethod.PERCENT_CHANGE} sortable />}
-      tvl={<HeaderCell category={TokenSortMethod.TOTAL_VALUE_LOCKED} sortable />}
-      volume={<HeaderCell category={TokenSortMethod.VOLUME} sortable />}
+      price={<HeaderCell category={TokenSortMethod.PRICE} />}
+      percentChange={<HeaderCell category={TokenSortMethod.PERCENT_CHANGE} />}
+      tvl={<HeaderCell category={TokenSortMethod.TOTAL_VALUE_LOCKED} />}
+      volume={<HeaderCell category={TokenSortMethod.VOLUME} />}
       sparkLine={null}
     />
   )
 }
 
 /* Loading State: row component with loading bubbles */
-export function LoadingRow() {
+export function LoadingRow(props: { first?: boolean; last?: boolean }) {
   return (
     <TokenRow
       header={false}
@@ -417,6 +415,7 @@ export function LoadingRow() {
       tvl={<LoadingBubble />}
       volume={<LoadingBubble />}
       sparkLine={<SparkLineLoadingBubble />}
+      {...props}
     />
   )
 }

src/components/Tokens/TokenTable/TokenTable.tsx

@@ -58,12 +58,12 @@ const LoadingRowsWrapper = styled.div`
   margin-top: 8px;
 `
 
-const LoadingRows = (rowCount?: number) => (
+const LoadingRows = (rowCount: number = PAGE_SIZE) => (
   <LoadingRowsWrapper>
-    {Array(rowCount ?? PAGE_SIZE)
+    {Array(rowCount)
       .fill(null)
       .map((_, index) => {
-        return <LoadingRow key={index} />
+        return <LoadingRow key={index} first={index === 0} last={index === rowCount - 1} />
       })}
   </LoadingRowsWrapper>
 )