terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add an example with custom loading component.

Browse source
This commit is contained in:
Arunoda Susiripala 2017-04-18 22:07:57 +05:30
parent 90ea471aa7
commit f2bfcd01b0
5 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/with-dynamic-import/components/hello.js
View file

@ -1,3 +0,0 @@
export default () => (
<p>Hello World (imported dynamiclly) </p>
)

3
examples/with-dynamic-import/components/hello1.js Normal file
View file

@ -0,0 +1,3 @@
export default () => (
<p>Hello World 1 (imported dynamiclly) </p>
)

3
examples/with-dynamic-import/components/hello2.js Normal file
View file

@ -0,0 +1,3 @@
export default () => (
<p>Hello World 2 (imported dynamiclly) </p>
)

9
examples/with-dynamic-import/pages/index.js
View file

@ -3,12 +3,19 @@ import Header from '../components/Header'
import Counter from '../components/Counter'
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(import('../components/hello'))
const DynamicComponent = dynamic(import('../components/hello1'))
const DynamicComponentWithCustomLoading = dynamic(
import('../components/hello2'),
{
loading: () => (<p>...</p>)
}
)
export default () => (
<div>
<Header />
<DynamicComponent />
<DynamicComponentWithCustomLoading />
<p>HOME PAGE is here!</p>
<Counter />
</div>

6
lib/dynamic.js
View file

@ -2,10 +2,11 @@ import React from 'react'
let currentChunks = []
export default function dynamicComponent (promise, Loading = () => (<p>Loading...</p>)) {
export default function dynamicComponent (promise, options = {}) {
return class Comp extends React.Component {
constructor (...args) {
super(...args)
this.LoadingComponent = options.loading ? options.loading : () => (<p>loading...</p>)
this.state = { AsyncComponent: null }
this.isServer = typeof window === 'undefined'
this.loadComponent()
@ -30,7 +31,8 @@ export default function dynamicComponent (promise, Loading = () => (<p>Loading..
render () {
const { AsyncComponent } = this.state
if (!AsyncComponent) return (<Loading {...this.props} />)
const { LoadingComponent } = this
if (!AsyncComponent) return (<LoadingComponent {...this.props} />)
return <AsyncComponent {...this.props} />
}