Is there a way to defer loading a a component?

Question

Currently I am dynamically loading a component in using next/dynamic. I'm loading in a confetti animation that only renders once my form is submitted. The problem with using next/dynamic is that when the form is successfully submitted, there is a bit of a delay before the confetti animation shows. It works fine if I don't dynamically load in the confetti component, but that means the initial bundle for my page is a lot bigger.

Is there a way to defer loading my component so that it is preloaded in the background rather than when it is needed?

Scottish Fold · Accepted Answer

My issue was that I wasn't rendering the animation component until the form submission succeeded, I resolved this by rendering the animation component upfront and preventing it from playing until the form submission succeeded.

Is there a way to defer loading a a component?

1 Reply