Add Skeleton

Author: neikop

apps/kyberswap-interface/src/components/Skeleton/index.tsx

@@ -0,0 +1,37 @@
+import { type ComponentProps } from 'react'
+import LoadingSkeleton from 'react-loading-skeleton'
+import { createGlobalStyle } from 'styled-components'
+
+import useTheme from 'hooks/useTheme'
+
+export type SkeletonProps = ComponentProps<typeof LoadingSkeleton>
+
+const SKELETON_CONTAINER_CLASSNAME = 'ks-skeleton-container'
+
+const SkeletonGlobalStyle = createGlobalStyle`
+  .${SKELETON_CONTAINER_CLASSNAME} {
+    display: block;
+    line-height: 0;
+  }
+`
+
+const Skeleton = ({ baseColor, containerClassName, highlightColor, ...props }: SkeletonProps) => {
+  const theme = useTheme()
+  const mergedContainerClassName = containerClassName
+    ? `${SKELETON_CONTAINER_CLASSNAME} ${containerClassName}`
+    : SKELETON_CONTAINER_CLASSNAME
+
+  return (
+    <>
+      <SkeletonGlobalStyle />
+      <LoadingSkeleton
+        {...props}
+        baseColor={baseColor ?? theme.background}
+        containerClassName={mergedContainerClassName}
+        highlightColor={highlightColor ?? theme.buttonGray}
+      />
+    </>
+  )
+}
+
+export default Skeleton

apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/PoolChartState.tsx

@@ -2,9 +2,9 @@ import { type ReactNode } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
+import Skeleton from 'components/Skeleton'
 import { HStack, Stack } from 'components/Stack'
 import useTheme from 'hooks/useTheme'
-import PositionSkeleton from 'pages/Earns/components/PositionSkeleton'
 
 const DEFAULT_CHART_HEIGHT = 360
 
@@ -64,19 +64,19 @@ const PoolChartStateLayout = ({
 export const PoolChartSkeleton = ({ height = DEFAULT_CHART_HEIGHT }: PoolChartSkeletonProps) => {
   return (
     <PoolChartStateLayout gap={12} height={height}>
-      <PositionSkeleton height={height} width="100%" />
+      <Skeleton height={height} width="100%" />
     </PoolChartStateLayout>
   )
 }
 
 const LiquidityFlowChartSkeleton = ({ height = DEFAULT_CHART_HEIGHT }: PoolChartSkeletonProps) => {
   return (
-    <Stack gap={8}>
+    <Stack gap={12}>
       <PoolChartSkeleton height={height} />
       <HStack gap={16} justify="center" wrap="wrap">
         {Array.from({ length: 3 }).map((_, index) => (
           <HStack align="center" gap={16} key={index}>
-            <PositionSkeleton height={16} width={120} />
+            <Skeleton height={14.5} width={120} />
           </HStack>
         ))}
       </HStack>
@@ -99,10 +99,10 @@ const EarningChartSkeleton = ({ height = DEFAULT_CHART_HEIGHT }: PoolChartSkelet
         sx={{ margin: '0 auto' }}
         width={isCompact ? '100%' : 'fit-content'}
       >
-        <PositionSkeleton style={{ borderRadius: 999 }} height={breakdownChartSize} width={breakdownChartSize} />
-        <Stack gap={8} width="fit-content">
+        <Skeleton circle height={breakdownChartSize} width={breakdownChartSize} />
+        <Stack gap={12} width="fit-content">
           {Array.from({ length: 4 }).map((_, index) => (
-            <PositionSkeleton key={index} height={14} width={120} />
+            <Skeleton height={17} key={index} width={120} />
           ))}
         </Stack>
       </Stack>