Earn page react-loading-skeleton

src/App.tsx

@@ -31,6 +31,7 @@ import Bolts from './containers/Bolts'
 import { Fuul } from '@fuul/sdk'
 import EarnDetails from './containers/Earn/EarnDetails'
 import Marketplace from './containers/Marketplace'
+import 'react-loading-skeleton/dist/skeleton.css'
 
 Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_DSN,

src/containers/Earn/PoolBlock.tsx

@@ -62,7 +62,6 @@ export default PoolBlock
 
 const BlockContainer = styled.div`
     border-radius: 4px;
-    margin-bottom: 29px;
     background: white;
     box-shadow: 0px 4px 6px 0px #0d4b9d33;
     position: relative;
@@ -71,6 +70,9 @@ const BlockContainer = styled.div`
     &.empty {
         background: white;
     }
+    &:not(:last-child) {
+        margin-bottom: 29px;
+    }
 `
 
 const BlockHeader = styled.div`

src/containers/Earn/index.tsx

@@ -3,13 +3,13 @@ import { useStoreActions, useStoreState } from '~/store'
 import { useActiveWeb3React } from '~/hooks'
 import { useEffect, useMemo, useState } from 'react'
 import useGeb from '~/hooks/useGeb'
-import Loader from '~/components/Loader'
 import Button from '~/components/Button'
 import { ExternalLink } from 'react-feather'
 import { POOLS } from '~/utils'
 import PoolBlock from './PoolBlock'
 import { JSX } from 'react/jsx-runtime'
 import { PoolData } from '@opendollar/sdk'
+import Skeleton from 'react-loading-skeleton'
 
 interface Cache {
     [key: string]: PoolData
@@ -91,9 +91,10 @@ const Earn = () => {
                         ) => <PoolBlock {...pool} nitroPoolData={nitroPools[i]} key={`${pool.nitroPoolAddress}-pool`} />
                     )
                 ) : (
-                    <Loader width="50px" color="#1A74EC" />
+                    <Skeleton height={50} count={2} baseColor={'#89B3FB'} highlightColor="#2871FD" />
                 )}
             </Pools>
+
             <BtnWrapper>
                 <Button data-test-id="steps-btn" id={'suggest-pool-btn'} secondary onClick={handleClick}>
                     suggest a new pool <ExternalLink />
@@ -157,7 +158,9 @@ const PoolsHeader = styled.h2`
     margin-bottom: 20px;
 `
 
-const Pools = styled.div``
+const Pools = styled.div`
+    margin-bottom: 30px;
+`
 
 const BtnWrapper = styled.div`
     width: max-content;