Merge pull request #955 from SatsAllDay/901-chart-skeletons

Chart skeletons

components/charts-skeletons.js

@@ -0,0 +1,19 @@
+export function GrowthPieChartSkeleton ({ height = '250px', minWidth = '200px' }) {
+  return <ChartSkeleton {...{ height, minWidth }} />
+}
+
+export function WhenComposedChartSkeleton ({ height = '300px', minWidth = '300px' }) {
+  return <ChartSkeleton {...{ height, minWidth }} />
+}
+
+export function WhenAreaChartSkeleton ({ height = '300px', minWidth = '300px' }) {
+  return <ChartSkeleton {...{ height, minWidth }} />
+}
+
+export function WhenLineChartSkeleton ({ height = '300px', minWidth = '300px' }) {
+  return <ChartSkeleton {...{ height, minWidth }} />
+}
+
+function ChartSkeleton (props) {
+  return <div className='mx-auto w-100 clouds' style={{ ...props }} />
+}

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: () => <div>Loading...</div>
+  loading: () => <WhenComposedChartSkeleton />
 })
 
 const REFERRALS = gql`

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: () => <div>Loading...</div>
+  loading: () => <GrowthPieChartSkeleton />
 })
 
 export const getServerSideProps = getGetServerSideProps({

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: () => <div>Loading...</div>
+  loading: () => <GrowthPieChartSkeleton />
 })
 
 const REWARDS_FULL = gql`

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: () => <div>Loading...</div>
+  loading: () => <WhenAreaChartSkeleton />
 })
 const WhenLineChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenLineChart), {
-  loading: () => <div>Loading...</div>
+  loading: () => <WhenLineChartSkeleton />
 })
 const WhenComposedChart = dynamic(() => import('@/components/charts').then(mod => mod.WhenComposedChart), {
-  loading: () => <div>Loading...</div>
+  loading: () => <WhenComposedChartSkeleton />
 })
 
 const GROWTH_QUERY = gql`