diff --git a/examples/with-dynamic-import/components/hello.js b/examples/with-dynamic-import/components/hello.js deleted file mode 100644 index b2441590..00000000 --- a/examples/with-dynamic-import/components/hello.js +++ /dev/null @@ -1,3 +0,0 @@ -export default () => ( -

Hello World (imported dynamiclly)

-) diff --git a/examples/with-dynamic-import/components/hello1.js b/examples/with-dynamic-import/components/hello1.js new file mode 100644 index 00000000..bf4d40db --- /dev/null +++ b/examples/with-dynamic-import/components/hello1.js @@ -0,0 +1,3 @@ +export default () => ( +

Hello World 1 (imported dynamiclly)

+) diff --git a/examples/with-dynamic-import/components/hello2.js b/examples/with-dynamic-import/components/hello2.js new file mode 100644 index 00000000..16cc3980 --- /dev/null +++ b/examples/with-dynamic-import/components/hello2.js @@ -0,0 +1,3 @@ +export default () => ( +

Hello World 2 (imported dynamiclly)

+) diff --git a/examples/with-dynamic-import/pages/index.js b/examples/with-dynamic-import/pages/index.js index 2c1d5919..fa768c75 100644 --- a/examples/with-dynamic-import/pages/index.js +++ b/examples/with-dynamic-import/pages/index.js @@ -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: () => (

...

) + } +) export default () => (
+

HOME PAGE is here!

diff --git a/lib/dynamic.js b/lib/dynamic.js index 9107da12..9197b5d8 100644 --- a/lib/dynamic.js +++ b/lib/dynamic.js @@ -2,10 +2,11 @@ import React from 'react' let currentChunks = [] -export default function dynamicComponent (promise, Loading = () => (

Loading...

)) { +export default function dynamicComponent (promise, options = {}) { return class Comp extends React.Component { constructor (...args) { super(...args) + this.LoadingComponent = options.loading ? options.loading : () => (

loading...

) this.state = { AsyncComponent: null } this.isServer = typeof window === 'undefined' this.loadComponent() @@ -30,7 +31,8 @@ export default function dynamicComponent (promise, Loading = () => (

Loading.. render () { const { AsyncComponent } = this.state - if (!AsyncComponent) return () + const { LoadingComponent } = this + if (!AsyncComponent) return () return }