I have a dashboard page in the web app I am building which is pretty much wholly made up of user data. Using the load function 'seems' like the best practice for fetching this data, but from my experiments it seems that a user will then have to wait for the load function to resolve before the browser even stops loading. My test setup was as below. The browser, as expected, only stops loading after 5 seconds since my mock fetch resolves after 5 seconds.
import type { PageLoad } from "./$types.js";export async function load() : Promise<PageLoad> { function fetchData(): Promise<string> { const promise = new Promise<string>((resolve, reject) => { setTimeout(() => { resolve("Hello World"); }, 5000); }); return promise; } const title = await fetchData(); return { props: { title, }, };}As a side note, TypeScript keeps giving me a 'Object literal may only specify known properties, and 'props' does not exist in type 'PageLoad'.' error which I am unsure how to fix.
Is it even possible to show a loading state while using the load() function or will I have to fetch the data in an onMount() ?
Any help would be appreciated. Thanks.