diff --git a/components/charts-skeletons.js b/components/charts-skeletons.js
new file mode 100644
index 00000000..51f13558
--- /dev/null
+++ b/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 }} />
+}
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: () => <div>Loading...</div>
+  loading: () => <WhenComposedChartSkeleton />
 })
 
 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: () => <div>Loading...</div>
+  loading: () => <GrowthPieChartSkeleton />
 })
 
 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: () => <div>Loading...</div>
+  loading: () => <GrowthPieChartSkeleton />
 })
 
 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: () => <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`