async client side fetch

[jloh]

Hi all! First off I admit I really have no idea what I'm doing, so feel free to tear apart the code that I have.

I have a SvelteKit app (https://github.com/jloh/geojs-app) that does two API calls per request. One of the API calls can be slow and doesn't need to block the other so I've tried to async/await it. For some reason this works when doing server side rendering however once the client is hydrated and doing client side rendering it starts blocking the other request.

The fast request is the request for /v1/ip/geo/<address>.json and the slow request is for /v1/dns/ptr/<address>.json.

I can reproduce this reliably by visiting https://app.geojs.io/ and seeing that the PTR line in the table renders without blocking the other lines in the table but if you then search for another IP, eg 1.1.1.1, you'll see that rendering is blocked on https://get.geojs.io/v1/dns/ptr/1.1.1.1.json even if https://get.geojs.io/v1/ip/geo/1.1.1.1.json returns much faster. I'm using fetch for both calls.

Is there a way to do what I'm after? Does using fetch for both calls block the first one somehow or something?

[geoffrich]

SvelteKit will automatically await all top-level promises returned from a load function. This is why rendering is blocked until both promises resolve.

If you don't want that behavior, you can nest them in an object so they are no longer at the top level.

	return {
		nested: { // this key can be named anything
		    geoLookup: geo, // the promise is not at the top level, so it is not automatically awaited
		    ptrLookup: ptr
		}
	};

[jloh]

Thanks so much for the docs link and example! This is exactly what I needed 👍

I implemented this fix in this commit for reference jloh/geojs-app@9ed2068