import React , { Suspense } from 'react' ; import { Row , Col } from 'antd' ; import PageLoading from './components/PageLoading' ; const ArticleChartCard = React . lazy ( ( ) => import ( './components/ArticleChartCard' ) ) ; const WorksChartCard = React . lazy ( ( ) => import ( './components/WorksChartCard' ) ) ; const TopicsChartCard = React . lazy ( ( ) => import ( './components/TopicsChartCard' ) ) ; const LinksChartCard = React . lazy ( ( ) => import ( './components/LinksChartCard' ) ) ; const HotSearchCard = React . lazy ( ( ) => import ( './components/HotSearchCard' ) ) ; const HotTagsCard = React . lazy ( ( ) => import ( './components/HotTagsCard' ) ) ; const ArticleHitCard = React . lazy ( ( ) => import ( './components/ArticleHitCard' ) ) ; const WorksHitCard = React . lazy ( ( ) => import ( './components/WorksHitCard' ) ) ; const ChartColProps = { xs : 24 , sm : 12 , md : 12 , lg : 12 , xl : 6 , } ; const TableColProps = { xs : 24 , sm : 24 , md : 24 , lg : 12 , xl : 12 , } ; interface HomePageProps { } const HomePage = ( ) => { return ( < div className = "indexlayout-main-conent" > < Row gutter = { 24 } > < Col { ... ChartColProps } > < Suspense fallback = { < PageLoading />}> < ArticleChartCard / > < /Suspense> < /Col> < Col { ... ChartColProps } > < Suspense fallback = { < PageLoading />}> < WorksChartCard / > < /Suspense> < /Col> < Col { ... ChartColProps } > < Suspense fallback = { < PageLoading />}> < TopicsChartCard / > < /Suspense> < /Col> < Col { ... ChartColProps } > < Suspense fallback = { < PageLoading />}> < LinksChartCard / > < /Suspense> < /Col> < /Row> < Row gutter = { 24 } > < Col { ... TableColProps } > < Suspense fallback = { < PageLoading />}> < HotSearchCard / > < /Suspense> < /Col> < Col { ... TableColProps } > < Suspense fallback = { < PageLoading />}> < HotTagsCard / > < /Suspense> < /Col> < /Row> < Row gutter = { 24 } > < Col { ... TableColProps } > < Suspense fallback = { < PageLoading />}> < ArticleHitCard / > < /Suspense> < /Col> < Col { ... TableColProps } > < Suspense fallback = { < PageLoading />}> < WorksHitCard / > < /Suspense> < /Col> < /Row> < /div>); } ; export default HomePage ;