feat: add loading

KyberNetwork · Nov 21, 2023 · 857942d · 857942d
1 parent 0f283e2
commit 857942d
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/src/hooks/farms/useFarmFilters.ts b/src/hooks/farms/useFarmFilters.ts
@@ -84,6 +84,9 @@ export default function useFarmFilters(): [FarmFilter, (filters: SetFilterParams
   const setFarmFilters = useCallback(
     (filters: SetFilterParams) => {
       Object.keys(filters).forEach(key => {
+        if (key !== 'page') {
+          searchParams.set('page', '1')
+        }
         if (key === 'chainIds') {
           const chainIds = filters[key]
           if (chainIds?.length) {

diff --git a/src/pages/OmniFarms/components/FarmList.tsx b/src/pages/OmniFarms/components/FarmList.tsx
@@ -1,3 +1,8 @@
+import { Trans } from '@lingui/macro'
+import { useMemo } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { usePrevious } from 'react-use'
+import { Text } from 'rebass'
 import { useGetFarmsQuery } from 'services/knprotocol'
 import styled from 'styled-components'
 
@@ -6,7 +11,7 @@ import { useActiveWeb3React } from 'hooks'
 import useFarmFilters from 'hooks/farms/useFarmFilters'
 import useTheme from 'hooks/useTheme'
 
-import FarmTableHeader from './FarmTableHeader'
+import FarmTableHeader, { HeaderWrapper } from './FarmTableHeader'
 import FarmTableRow from './FarmTableRow'
 
 const FarmTable = styled.div(({ theme }) => ({
@@ -16,25 +21,71 @@ const FarmTable = styled.div(({ theme }) => ({
   overflow: 'hidden',
 }))
 
+const Row = styled(HeaderWrapper)(({ theme }) => ({
+  background: 'transparent',
+  padding: '1rem 1.5rem',
+  fontSize: '14px',
+  fontWeight: '500',
+  borderBottom: `1px solid ${theme.border}`,
+  height: '70px',
+}))
+
 export default function FarmList() {
   const theme = useTheme()
   const { account } = useActiveWeb3React()
   const [{ chainIds, ...filters }, setFarmFilters] = useFarmFilters()
 
-  const { data } = useGetFarmsQuery(
-    { ...filters, account },
-    {
-      pollingInterval: 10_000,
-    },
-  )
+  const params = useMemo(() => ({ ...filters, account }), [filters, account])
+
+  const prevParams = usePrevious(params)
+
+  const {
+    currentData: data,
+    isLoading,
+    isFetching,
+  } = useGetFarmsQuery(params, {
+    pollingInterval: 10_000,
+  })
+
+  const skeleton = (width: string, align?: 'left' | 'right') => {
+    return (
+      <Text textAlign={align || 'right'}>
+        <Skeleton
+          height="20px"
+          width={width}
+          baseColor={theme.border}
+          highlightColor={theme.buttonGray}
+          borderRadius="999px"
+        />
+      </Text>
+    )
+  }
 
   return (
     <FarmTable>
       <FarmTableHeader />
 
-      {data?.farmPools.map(farm => {
-        return <FarmTableRow farm={farm} key={`${farm.chain.name}_${farm.protocol}_${farm.id}`} />
-      })}
+      {isLoading || (isFetching && JSON.stringify(prevParams) !== JSON.stringify(params)) ? (
+        [...Array(10).keys()].map(i => (
+          <Row key={i}>
+            {skeleton('80%', 'left')}
+            {skeleton('80%')}
+            {skeleton('80%')}
+            {skeleton('60%')}
+            {skeleton('80%')}
+            {skeleton('70%')}
+            {skeleton('70%')}
+          </Row>
+        ))
+      ) : data?.farmPools.length ? (
+        data?.farmPools.map(farm => {
+          return <FarmTableRow farm={farm} key={`${farm.chain.name}_${farm.protocol}_${farm.id}`} />
+        })
+      ) : (
+        <Text padding="3rem" display="flex" alignItems="center" justifyContent="center" color={theme.subText}>
+          <Trans>No Farm Found</Trans>
+        </Text>
+      )}
 
       <Pagination
         onPageChange={page => {