sveltejs / sveltejs/kit

Need a better, cleaner way to block/gate/await descendant loads in layout groups

Open
#15,830 15 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

load / layout
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_promises await 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.