chart skeletons

This commit is contained in:
Satoshi Nakamoto 2024-03-22 23:47:21 -04:00
parent 5efbe2e0a6
commit 32bc483e48
5 changed files with 29 additions and 6 deletions

View File

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

View File

@ -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`

View File

@ -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({

View File

@ -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`

View File

@ -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`