mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add an example with custom loading component.
This commit is contained in:
parent
90ea471aa7
commit
f2bfcd01b0
|
@ -1,3 +0,0 @@
|
||||||
export default () => (
|
|
||||||
<p>Hello World (imported dynamiclly) </p>
|
|
||||||
)
|
|
3
examples/with-dynamic-import/components/hello1.js
Normal file
3
examples/with-dynamic-import/components/hello1.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default () => (
|
||||||
|
<p>Hello World 1 (imported dynamiclly) </p>
|
||||||
|
)
|
3
examples/with-dynamic-import/components/hello2.js
Normal file
3
examples/with-dynamic-import/components/hello2.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
export default () => (
|
||||||
|
<p>Hello World 2 (imported dynamiclly) </p>
|
||||||
|
)
|
|
@ -3,12 +3,19 @@ import Header from '../components/Header'
|
||||||
import Counter from '../components/Counter'
|
import Counter from '../components/Counter'
|
||||||
import dynamic from 'next/dynamic'
|
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 () => (
|
export default () => (
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<DynamicComponent />
|
<DynamicComponent />
|
||||||
|
<DynamicComponentWithCustomLoading />
|
||||||
<p>HOME PAGE is here!</p>
|
<p>HOME PAGE is here!</p>
|
||||||
<Counter />
|
<Counter />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,10 +2,11 @@ import React from 'react'
|
||||||
|
|
||||||
let currentChunks = []
|
let currentChunks = []
|
||||||
|
|
||||||
export default function dynamicComponent (promise, Loading = () => (<p>Loading...</p>)) {
|
export default function dynamicComponent (promise, options = {}) {
|
||||||
return class Comp extends React.Component {
|
return class Comp extends React.Component {
|
||||||
constructor (...args) {
|
constructor (...args) {
|
||||||
super(...args)
|
super(...args)
|
||||||
|
this.LoadingComponent = options.loading ? options.loading : () => (<p>loading...</p>)
|
||||||
this.state = { AsyncComponent: null }
|
this.state = { AsyncComponent: null }
|
||||||
this.isServer = typeof window === 'undefined'
|
this.isServer = typeof window === 'undefined'
|
||||||
this.loadComponent()
|
this.loadComponent()
|
||||||
|
@ -30,7 +31,8 @@ export default function dynamicComponent (promise, Loading = () => (<p>Loading..
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { AsyncComponent } = this.state
|
const { AsyncComponent } = this.state
|
||||||
if (!AsyncComponent) return (<Loading {...this.props} />)
|
const { LoadingComponent } = this
|
||||||
|
if (!AsyncComponent) return (<LoadingComponent {...this.props} />)
|
||||||
|
|
||||||
return <AsyncComponent {...this.props} />
|
return <AsyncComponent {...this.props} />
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue