Snapshot restore is slower than child component functions
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the problem
Restoring snapshots from the parent page of a component has a race condition. A remote function in a child component may run before the snapshot restore occurs. Unfortunately, snapshot.restore does not have a .ready property like remote functions do, which means a remote function in a child component can run before the snapshot.restore happens.
I created this project with async and remote flags turned on to demonstrate https://github.com/half-metal/restore-with-async
You'll see something like this in the console log
PARENT PAGE - capture posts (6) [{…}, {…}, {…}, {…}, {…}, {…}]
CHILD - running getPosts() in child component
PARENT PAGE +page.svelte:15 restore value {posts: Array(6)}
I can manually create a property like 'isReady' and if posts is zero or do a timeout, but it seems hacky, and I notice some edge cases where I need a timeout. I can also do a global state to track restoring for certain page, but that gets ugly too. I tried setting restore to an async function and even had await, but that did nothing.
Snapshot restore is crucial to modern websites, and avoid wasteful API calls that you already have data for when navigating away and back and easily scrolling to where the user was at. This gets messy when you have infinite scrolling, cursor pagination, and if the snapshot restore function is too slow.
Describe the proposed solution
You could have a snapshot.restore.ready property, but maybe a better option is some setting on the restore function that indicates not to load the child component until it's ready.
I'm also confused why snapshot.restore wouldn't be instant like the first thing to happen. Again I do have kit set to async because my app has remote functions.
Importance
would make my life easier
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked restore-with-async reproduction and trace the snapshot.restore entry point alongside the child component's remote function. Confirm the ordering problem under async mode, then define and document a single restore-readiness behavior that prevents premature child work, with regression coverage for the demonstrated sequence.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100