Dynamic import - delay and timeout feature doesn't work

[rashidul0405]

Bug report

delay and timeout feature from react-loadable doesn't work with Dynamic import provided by next/dynamic

Describe the bug

It shows the " Flashing Screen Of Loading Component" as described here. And it looks very odd.

To Reproduce

Current implementation looks like as below:

pages/content.js

import dynamic from "next/dynamic"

const Article = dynamic(() => import("../contentTypes/Article"), {
  delay: 3000,
  timeout: 10000
})
const TestArticle = dynamic(() => import("../contentTypes/TestArticle"), {
  delay: 3000,
  timeout: 10000
})

const Content = ({ content }) => {
  return (
    <>
      {content.type === "article" && <Article content={content} />}
      {content.type === "test" && <TestArticle content={content} />}
    </>
  )
}

Content.getInitialProps = () => {
  .....api.get()
  return {
    content: apiResponse.content
  }
}

Expected behavior

It should wait for 3 seconds before flashing "loading....." on the screen.

System information

• OS: [macOS and Ubuntu 16.04]
• Browser: chrome latest
• Version of Next.js: 8.0.3

Additional context

I see above options are passing properly from dynamic.js to loadable.js.

Is there anything related to capture or the implementation above?

[ijjk]

@rashidul0405 I just submitted a PR addressing the loading... showing before the delay.

Note: you can also pass a custom loading component using the loading option and then handle the pastDelay and timedOut custom

[rashidul0405]

@ijjk Thanks for this. I'm confirming this is working as expected. I knew about the pastDelay options but was happy with the default loading. However, Is it possible to release this (maybe as 8.0.4) as it's directly related to user experience? cc: @timneutkens