kaisermann / kaisermann/svelte-loadable
Loading never displayed?
- Dominant language
- Svelte
- Stars
- 321
- Forks
- 12
- PR merge metrics
- No merged PRs in 30d
Description
Hello!
I'm using `svelte-loadable` in conjunction with `svelte-routing`. I'm having an issue where there is a ~1 second delay when changing route before my component is displayed. I was thinking that lazy-loading my component with `svelte-loadable` would at least allow me to display a loading bar while the component is being loaded, but that does not seem to be the case.
If I hardcode a large delay like shown in your example page (https://github.com/kaisermann/svelte-loadable/blob/master/example/src/App.svelte), then the loading slot is displayed. But if I don't, none is shown. I've also set the `delay` prop to 0 while making both tests.
Is this because there is actually no delay for the loading of my component and that the problem I am experiencing is that there is too much processing in my component, which blocks the DOM for a second? I would be surprised if this is the case, because on the initial loading of the page the component appears right away. Which is why I think I'm doing something wrong with `svelte-loadable`, or maybe there is some sort of a bug.
Let me know if you have any insight on what could be causing this issue on the `svelte-loadable` side.
Cheers!
**Edit # 1**
To make it work, I have to add the `unloader` prop: ``. Without the `unloader` prop, the loading slot will not be displayed if I navigate back to this page, because the loading has been cached. However, there is still a 1sec delay before the component is displayed, even if the loading has been cached. Weirdly enough, the loading slot never appears on the initial page render, but appears every time the page is accessed with changing route (if the `unloader` prop is specified). So I unload the the loader, just to show the loading slot. And since the component loads so fast that it doesn't display the loading slot (yet there is still a 1 second delay before component is displayed), I need to artificially delay the loader just to display the loading slot:
const HomeLoader = register({
loader: () => {
return new Promise((resolve, reject) =>
setTimeout(() => resolve(import('./home/Home.svelte'))),
)
},
resolve: () => 'Home',
})
This makes the loading slot display, because I have set the `delay` prop to 0. And there is still a 1 second delay before my component is rendered, so the loading slot stays there until the component is displayed, which gives the illusion of loading...
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the route change with svelte-routing and the Loadable configuration described in the issue, including delay=0 and the unloader prop. Compare the behavior with example/src/App.svelte and the HomeLoader using import('./home/Home.svelte'). Done means identifying whether the delay is caused by loading, caching, or component rendering and documenting the resulting fix or explanation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100