Update with-dynamic-import example (#5201)

Follow up on: https://github.com/zeit/next.js/pull/4639

examples/with-dynamic-import/next.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   exportPathMap: function () {
     return {
-      '/': { page: '/' },
+      '/': { page: '/', query: { showMore: false } },
       '/about': { page: '/about' }
     }
   }

examples/with-dynamic-import/pages/index.js

@@ -4,35 +4,39 @@ import Header from '../components/Header'
 import Counter from '../components/Counter'
 import dynamic from 'next/dynamic'
 
-const DynamicComponent = dynamic(import('../components/hello1'))
-const DynamicComponentWithCustomLoading = dynamic(
-  import('../components/hello2'),
-  {
-    loading: () => (<p>...</p>)
-  }
-)
-const DynamicComponentWithNoSSR = dynamic(
-  import('../components/hello3'),
-  { ssr: false }
-)
-const DynamicComponent5 = dynamic(import('../components/hello5'))
+const DynamicComponent1 = dynamic(import('../components/hello1'))
+
+const DynamicComponent2WithCustomLoading = dynamic({
+  loader: () => import('../components/hello2'),
+  loading: () => (<p>Loading caused by client page transition ...</p>)
+})
+
+const DynamicComponent3WithNoSSR = dynamic({
+  loader: () => import('../components/hello3'),
+  loading: () => (<p>Loading ...</p>),
+  ssr: false
+})
+
+const DynamicComponent4 = dynamic({
+  loader: () => import('../components/hello4')
+})
+
+const DynamicComponent5 = dynamic({
+  loader: () => import('../components/hello5')
+})
 
 const DynamicBundle = dynamic({
-  modules: (props) => {
+  modules: () => {
     const components = {
-      Hello6: import('../components/hello6')
+      Hello6: import('../components/hello6'),
+      Hello7: import('../components/hello7')
     }
-
-    if (props.showMore) {
-      components.Hello7 = import('../components/hello7')
-    }
-
     return components
   },
   render: (props, { Hello6, Hello7 }) => (
     <div style={{padding: 10, border: '1px solid #888'}}>
       <Hello6 />
-      {Hello7 ? <Hello7 /> : null}
+      <Hello7 />
     </div>
   )
 })
@@ -42,7 +46,7 @@ export default class Index extends React.Component {
     return { showMore: Boolean(query.showMore) }
   }
 
-  toggleShowMore () {
+  toggleShowMore = () => {
     const { showMore } = this.props
     if (showMore) {
       Router.push('/')
@@ -58,18 +62,25 @@ export default class Index extends React.Component {
     return (
       <div>
         <Header />
-        <DynamicComponent />
-        <DynamicComponentWithCustomLoading />
-        <DynamicComponentWithNoSSR />
-        <DynamicBundle showMore={showMore} />
-        <button onClick={() => this.toggleShowMore()}>Toggle Show More</button>
-        {
-          /*
-            Since DynamicComponent5 does not render in the client,
-            it won't get downloaded.
-          */
-        }
-        { React.noSuchField === true ? <DynamicComponent5 /> : null }
+
+        {/* Load immediately, but in a sepeate bundle */}
+        <DynamicComponent1 />
+
+        {/* Show a progress indicator while loading */}
+        <DynamicComponent2WithCustomLoading />
+
+        {/* Load only on the client side */}
+        <DynamicComponent3WithNoSSR />
+
+        {/* This component will never be loaded */}
+        {React.noSuchField && <DynamicComponent4 />}
+
+        {/* Load on demand */}
+        {showMore && <DynamicComponent5 />}
+        <button onClick={this.toggleShowMore}>Toggle Show More</button>
+
+        {/* Load multible components in one bundle */}
+        <DynamicBundle />
 
         <p>HOME PAGE is here!</p>
         <Counter />