Suspense support for load() functions

[kyjus25]

Summary

I've seen discussions bounced around on Reddit here and here, and even a 3rd party implementation on GitHub here, but never anyone bringing the idea front and center to the discussion board.

In large applications where load() has to await for large amounts of data (either from itself or it's parents), it can take several moments for a page redirect to happen. data-sveltekit-preload-data kind of solves this, but not when loading takes excessive time. It is quite jarring to click on a link that does nothing for several moments before redirecting (some of which is just me being spoiled by Single Page Applications and how fast SvelteKit normally is).

Next.JS's upcoming implementation for loading.tsx I think handles this issue perfectly in their new React Server Components features (I like the idea of separating the loading skeleton from the real component). SolidStart also has an implementation in their createResource function that mentions integrating with Suspense also.

I think that this gets in to the concept I've seen called "streaming", but if it could be pulled off I think it would greatly expand the versatility of SvelteKit. It reminds me maybe a bit of use:enhance for forms, just the other direction.

Possible Solutions

• Optionally return the promise immediately without waiting for it to be resolved that could be awaited client side with an #Await block
• Return a Svelte store reference that could be subscribed to on the client side
• A new page.loading.svelte that could trigger the alternate behavior of load and substitute itself in place of the real page until loading is complete

[geoffrich]

Related: #7213

[kyjus25]

@geoffrich Fantastic! Looks like I was looking for the wrong search terms. Thanks for linking!