Skip to content

Instantly share code, notes, and snippets.

@Nilanth

Nilanth/.jsx Secret

Created September 13, 2021 14:55
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Nilanth/f4236862a5748873bc9e53fec9689239 to your computer and use it in GitHub Desktop.
lazy-loading
const Sales = lazy(() => import('components/Sales'));
const Profit = lazy(() => import('components/Profit'));
const Chart = lazy(() => import('components/Chart'));
const Tiles = lazy(() => import('components/Tiles'));
const Trends = lazy(() => import('components/Trends'));
const { TabPane } = Tabs;
function Dashboard() {
return (
<Tabs defaultActiveKey="1">
<TabPane tab="Sales" key="1">
<Suspense fallback={<div>Loading...</div>}>
<Sales/>
</Suspense>
</TabPane>
<TabPane tab="Profit" key="2">
<Suspense fallback={<div>Loading...</div>}>
<Profit/>
</Suspense>
</TabPane>
<TabPane tab="Chart" key="3">
<Suspense fallback={<div>Loading...</div>}>
<Chart/>
</Suspense>
</TabPane>
<TabPane tab="Tiles" key="4">
<Suspense fallback={<div>Loading...</div>}>
<Tiles/>
</Suspense>
</TabPane>
<TabPane tab="Trends" key="5">
<Suspense fallback={<div>Loading...</div>}>
<Trends/>
</Suspense>
</TabPane>
</Tabs>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment