Dynamic Imported Components about yrv HOT 10 CLOSED

Sure, I will try 👍

from yrv.

Oh, nice question, I haven't look at it yet... I need some time to explore this, thank you!

from yrv.

Hi, now you can use the dynamic and pending attributes for that, e.g.

<Route dynamic={import('./your/component.js')} pending="Loading ..." />

from yrv.

from yrv.

Hello folks,

@pateketrueke thanks for sleek router.

I've been playing with it lately, but couldn't manage it to work dynamically. I did as specified above, but the component I try to load dynamically appears in the browser straight on load.

   <Route path="/World" dynamic={ import(/* webpackChunkName: "async" */'@/components/async.svelte') } pending="Loading..."/>

On network it appears straight away.

Any help is appreciated.

from yrv.

but the component I try to load dynamically appears in the browser straight on load.

So the component is rendered regardless the current/active route? Or you say the network request should not be needed until actual usage?

Probably we need a special way to lazily inline the promise wheen needed (if the later), e.g.

<Route dynamic={() => import(...)} />

I think we can detect if its value is a function or a promise... based on that we can then delay the actual loading of the underlying component.

What do you think?

from yrv.

Thanks for swift reply!

I think this kind of functionality would be great. Tough may cause some misunderstanding of what exactly does dynamic prop.

May be it would be better to have "dynamic" prop only for async loading of components on demand, while "component" prop may have this functionality of getting either svelte component or import statement.

from yrv.

May be it would be better to have "dynamic" prop only for async loading of components on demand, while "component" prop may have this functionality of getting either svelte component or import statement.

I like that, would you mind on opening a PR with those changes?

from yrv.

Submitted PR:
Dynamic components

from yrv.

Resolved in Dynamic components.

from yrv.