Need a better, cleaner way to block/gate/await descendant loads in layout groups
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
If you have a (authenticated) layout group it would be amazing to have a way to automatically gate everything within it using the +layout.svelte's load function
Currently, all load functions in a route tree run concurrently. There's no way to make a layout's load act as a prerequisite for its children for pages that are not SSR'd.
For example, to redirect unauthenticated users before any child data fetching begins, or to resolve configuration/context that children depend on.
Proposal
Add a gate export to +layout.js and +layout.server.js that prevents descendant load functions from starting until the layout's own load has resolved. Nested gates chain sequentially.
This was proposed in PR #15829, which was closed without merge.
Implementation would look something like this:
// +layout.js or +layout.server.js
export const gate = true;
export async function load({ parent }) {
const { user } = await parent();
if (!user) redirect(302, '/login');
return { user };
}
When gate = true is exported from a layout module, SvelteKit will wait for that layout's load to complete before starting any descendant loads (both server and universal). Nested gated layouts run sequentially in order from outermost to innermost.
Behaviour
- Works with both
+layout.js(universal) and+layout.server.js(server-only) - On the server: descendant
load_promisesawait gated ancestors before starting - On the client: pre-allocated deferred promises (
gate_deferreds) allow descendants to await gated layouts without circular TDZ issues - Nested gates chain: inner gated layout awaits outer gated layout, page awaits all gated ancestors in order
- Redirects thrown inside a gated layout prevent any child load from running
Personal note
PR and Issue was generated with the help of Claude code but has been reviewed and guided by me, the usecase is not bogus and stems from a real need I've had in an application I wrote myself.
The issues has been discussed in the Discord server here: https://discord.com/channels/457912077277855764/1501660832453492787
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 by reviewing the proposed implementation in closed PR #15829 and the load handling for +layout.js and +layout.server.js. Trace the server load_promises and client gate_deferreds behavior described in the issue. Done means gated descendant loads wait in outermost-to-innermost order, including redirects and nested layouts, on both server and client.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- full-stack
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100