sveltejs / sveltejs/kit

Defer not working properly when multiple promises are returned

Open
#9,154 27 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:adapter-cloudflare pkg:adapter-vercel
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

I've tryed the new defer api with vercel edge functions and when a single promise is returned it works as intended. However when you return multiple promises things get's messy quickly.

For example

const wait = (ms) => new Promise((r) => setTimeout(r, ms));

async function getBlog() {
	await wait(2000);
	return 'A cool blog post';
}

async function getComments() {
	await wait(4000);
	return ['Very cool', 'Super', 'Fantastic'];
}

async function getRecommended() {
	await wait(1000);
	return ['Another post', 'Suh interesting'];
}

async function getFail() {
	await wait(8000);
	throw new Error('Dang!');
}

export async function load() {
	const recommended = getRecommended();
	const comments = getComments();
	const fail = getFail();
	const blog = await getBlog();
	return {
		blog,
		defer: {
			recommended,
			comments,
			fail
		}
	};
}

this configuration correcly wait 2 seconds before showing the page. The recommended shows a sliver of loading state to than resolve immediately however for getComments and getFail the loading state perpetrate until both of them resolve at the same time. When i was trying this at the beginning i saw the same kind of result with only getRecommended + getComments (in this case getRecommended that should already be resolved was persisting in the loading state for a couple of seconds).

https://user-images.githubusercontent.com/26281609/220394130-afd142cd-f182-4190-97b0-16ca99f055c0.mp4

Reproduction

You can see the live version of this on vercel.

You can see the code on my github repo and edit the code on stackblitz

Logs
No logs
System Info
System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 16.14.2 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 7.17.0 - /usr/local/bin/npm
npmPackages:
  @sveltejs/adapter-auto: ^2.0.0 => 2.0.0 
  @sveltejs/adapter-vercel: ^2.0.4 => 2.0.4 
  @sveltejs/kit: ^1.5.0 => 1.8.3 
  svelte: ^3.54.0 => 3.55.1 
  vite: ^4.0.0 => 4.1.3
Severity

blocking an upgrade

Additional Information

No response

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 with the reproduction repository and the src/routes/+page.server.ts entry point linked from the StackBlitz example, then compare the behavior with the Vercel deployment. Verify that each promise in the defer object leaves its own loading state and resolves or reports failure independently rather than waiting for the others.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript, vite
Domain
backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.