I'm featching large amount on data and meanwhile I want to lazy load the react table

import React, {Component, Fragment, lazy, Suspense} from 'react'; 
const ReactTable = lazy(() => import("react-table")); 
render() 
{ 
return ( 
<Suspense fallback={<div>Loading...</div>}> 
{this.state.securityCheck.length ? 
<ReactTable columns={columns} data={this.state.securityCheck} /> 
: 
<div className='text-center' style= {{fontSize: '20px'}}>No data =
Available! </div> } 
</Suspense> 
) 
}

I'm featching large amount on data and meanwhile I want to lazy load the react table

import React, {Component, Fragment, lazy, Suspense} from 'react'; 
const ReactTable = lazy(() => import("react-table")); 
render() 
{ 
return ( 
<Suspense fallback={<div>Loading...</div>}> 
{this.state.securityCheck.length ? 
<ReactTable columns={columns} data={this.state.securityCheck} /> 
: 
<div className='text-center' style= {{fontSize: '20px'}}>No data =
Available! </div> } 
</Suspense> 
) 
}

• javascript
• reactjs
• lazy-loading
• react-table

Share Follow asked Jun 10, 2019 at 8:43 Parth ShrivastavaParth Shrivastava 3111 gold badge11 silver badge66 bronze badges 1

• 1 There are quite a few resources for this sort of thing online, I will leave one here: hackernoon./… In the mean time, please update your question with any specific issues you are getting as well as your current approach. – Mark Harwood Commented Jun 10, 2019 at 8:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

From the Docs:

The fallback prop accepts any React elements that you want to render while waiting for the ponent to load. You can place the Suspense ponent anywhere above the lazy ponent. You can even wrap multiple lazy ponents with a single Suspense ponent.

Try this,

<Suspense fallback={<div>Loading...</div>}> 
   <ReactTable columns={columns} data={this.state.securityCheck} /> 
</Suspense>