diff --git a/components/charts-skeletons.js b/components/charts-skeletons.js new file mode 100644 index 00000000..6f762e78 --- /dev/null +++ b/components/charts-skeletons.js @@ -0,0 +1,19 @@ +export function GrowthPieChartSkeleton ({ width = '100%', height = '250px !important', minWidth = '200px' }) { + return +} + +export function WhenComposedChartSkeleton ({ width = '100%', height = '300px !important', minWidth = '300px' }) { + return +} + +export function WhenAreaChartSkeleton ({ width = '100%', height = '300px !important', minWidth = '300px' }) { + return +} + +export function WhenLineChartSkeleton ({ width = '100%', height = '300px !important', minWidth = '300px' }) { + return +} + +function ChartSkeleton (props) { + return
+} diff --git a/pages/referrals/[when].js b/pages/referrals/[when].js index 2c327248..47489103 100644 --- a/pages/referrals/[when].js +++ b/pages/referrals/[when].js @@ -11,9 +11,10 @@ import { WHENS } from '@/lib/constants' import dynamic from 'next/dynamic' import { numWithUnits } from '@/lib/format' import { whenToFrom } from '@/lib/time' +import { WhenComposedChartSkeleton } from '@/components/charts-skeletons' const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), { - loading: () =>
Loading...
+ loading: () => }) const REFERRALS = gql` diff --git a/pages/rewards/[...when].js b/pages/rewards/[...when].js index 05b93034..43ce3468 100644 --- a/pages/rewards/[...when].js +++ b/pages/rewards/[...when].js @@ -9,9 +9,10 @@ import { fixedDecimal } from '@/lib/format' import Trophy from '@/svgs/trophy-fill.svg' import { ListItem } from '@/components/items' import { dayMonthYear } from '@/lib/time' +import { GrowthPieChartSkeleton } from '@/components/charts-skeletons' const GrowthPieChart = dynamic(() => import('@/components/charts').then(mod => mod.GrowthPieChart), { - loading: () =>
Loading...
+ loading: () => }) export const getServerSideProps = getGetServerSideProps({ diff --git a/pages/rewards/index.js b/pages/rewards/index.js index c5440f06..ff97768f 100644 --- a/pages/rewards/index.js +++ b/pages/rewards/index.js @@ -19,9 +19,10 @@ import { ListUsers } from '@/components/user-list' import { Col, Row } from 'react-bootstrap' import { proportions } from '@/lib/madness' import { useData } from '@/components/use-data' +import { GrowthPieChartSkeleton } from '@/components/charts-skeletons' const GrowthPieChart = dynamic(() => import('@/components/charts').then(mod => mod.GrowthPieChart), { - loading: () =>
Loading...
+ loading: () => }) const REWARDS_FULL = gql` diff --git a/pages/stackers/[when].js b/pages/stackers/[when].js index ebe3ec9b..453fbc08 100644 --- a/pages/stackers/[when].js +++ b/pages/stackers/[when].js @@ -7,15 +7,16 @@ import { UsageHeader } from '@/components/usage-header' import { useRouter } from 'next/router' import dynamic from 'next/dynamic' import PageLoading from '@/components/page-loading' +import { WhenAreaChartSkeleton, WhenComposedChartSkeleton, WhenLineChartSkeleton } from '@/components/charts-skeletons' const WhenAreaChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenAreaChart), { - loading: () =>
Loading...
+ loading: () => }) const WhenLineChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenLineChart), { - loading: () =>
Loading...
+ loading: () => }) const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), { - loading: () =>
Loading...
+ loading: () => }) const GROWTH_QUERY = gql`