How should I display contents while load is processing with client-side rendering?

[theetrain]

If I want a page to show contents during a long load process (over 5 seconds for example), should I fetch an endpoint from my page's onMount, or should disabling SSR for a page have its contents rendered first, and then the page re-renders after load completes?

I've observed having export const ssr = false in a +page.server.js or +page.js file will load the page's scripts without server side rendering, but no contents on the page are visible until that page's load completes. I assume this is intentional behaviour since contents returned from load need to pass into its page's export let data prop. Here is a demonstration: https://stackblitz.com/edit/sveltejs-kit-csr?file=README.md&terminal=dev

Since disabling ssr is still render-blocking, I don't really see a benefit to disabling ssr. Related to #7116

[eltigerchino]

You can disable SSR app wide in a root +layout.js file and use an {#await} to show content during your load process.
https://stackblitz.com/edit/sveltejs-kit-csr-yjzpnd?file=src/routes/+page.svelte

I don't think there is a way to await load at the moment, but maybe there should be?

[sdekna]

I agree, there should be a way to wait for the load function while displaying something to users... since onMount exposes your fetches to the user, the use of load could sometimes be important, but making the users wait for it to finish execution before seeing anything can result in a slow user experience.

[theetrain]

Using {#await} alongside a client-side fetch is a good suggestion, and probably the only path forward for now.

I suppose if SvelteKit could have load delay results during CSR (when export const ssr = false) and show contents meanwhile, then perhaps it would look like one of these:

1. page data is {} until load completes

   +page.svelte

   <script>
     export let data
   </script>
   
   {#if Object.keys(data).length === 0}
     <p>Loading...</p>
   {:else}
     <p>Data is here! {data}</p>
   {/if}

   You can even set a default value to data, export let data = { loading: true }

2. data is a promise when ssr = false

   +page.svelte

   <script>
     export let data
   </script>
   
   {#await data}
     <p>Loading...</p>
   {:then returnedData}
     <p>Data is here! {returnedData}</p>
   {/await}

3. SvelteKit provides a csrLoading reactive variable, meanwhile data is undefined

   +page.svelte

   <script>
     import { csrLoading } from '$app/environment'
     export let data
   </script>
   
    {#if csrLoading}
      <p>Loading...</p>
    {:else}
      <p>Data is here! {data}</p>
    {/if}

   Or perhaps csrLoading should return a catchable promise in case there are loading issues. 🤔

---

1 has drawbacks since Object.keys(data).length isn't the most efficient determiner of an empty object and feels boiler-platey.
2 isn't very intuitive since it changes the behaviour of data between ssr and csr
I see 3 as the most effective option since a new environment flag can determine when load has completed.

[fabiot21]

or just data is undefined when ssr = false

+ page.svelte

<script>
  export let data
</script>

 {#if data}
   <p>Loading...</p>
 {:else}
   <p>Data is here! {data}</p>
 {/if}

[theetrain]

or just data is undefined when ssr = false
— @fabiot21

I thought about that, but with JS type coercion {#if undefined} is false, and {#if { myData: 'hello' } } is also false.

[fabiot21]

Right! in that case, i think option 2 is better (await load) for DX. It's way more intuitive.

[danawoodman]

What exactly do you want to show before the load completes? And is this on navigation or initial SSR?

One approach:

For initial load via SSR, you could use a global loading state store which is set to true by default. Then in onMount in your layout you could set it to false. While it is true, you can show a loading UI.

For navigation, hook into beforeNavigate/afterNavigate events in your layout to set/clear the loading state.

[theetrain]

Thanks for lending your support 😃.

I use SSR for all my pages, but I'm working on a page that has heavy data aggregation, similarly to displaying file diffs in a GitHub pull request. For this experience, I would like to disable SSR, display a content skeleton and other loading indicators, and then display the content when it's finally available after a few seconds. This page could load either on navigate or initial load since users could arrive from a permalink.

I already make use of https://github.com/saibotsivad/svelte-progress-bar to show progress while navigating from page-to-page hooking into beforeNavigate/afterNavigate like in your suggestion. However with a page that has 5+ or 10+ seconds spent during load I feel it would be better to show a page skeleton than to have the user wait too long when they're accustomed to faster load times between other pages.

[danawoodman]

Then fetch the data on the client and show a loading indicator. Move the fetching out of the load method and into an endpoint

[theetrain]

I agree, and that's probably the path forward as suggested in #7119 (comment) as well. I've got a proof of concept going here: https://stackblitz.com/edit/sveltejs-kit-csr-l4cpaf?file=src%2Froutes%2F%2Bpage.svelte&terminal=dev

1. Use SSR to load page
2. Call endpoint using client-side fetch and content negotiation
3. Load asynchronous contents

I've thrown out CSR for now; I'm noticing even fewer reasons to have CSR the more I discuss this 🤔. Maybe it's a good idea to keep this responsibility outside of load after all.

With that aside, I guess I was also hoping to find a way to server-render some contents to tell the user something is taking a while to load, and then when the content is ready, server-render that as well. I suppose another way of achieving that is an intermediary page and redirect; something along these lines:

1. Go to /pull-requests/1; the page loads with SSR
2. Click on 'view file diffs'; the site routes to /pull-requests/1/gotodiffs; "Loading..." content appears
3. Prefetch data for next route; once ready, go to /pull-requests/1/diffs
4. User lands on "diffs" page

It's a clunky idea, but at least everything would be server-side rendered. I realize this is out of scope because now I'm asking the opposite of my original question.

[danawoodman]

If you're optimizing for when a user navigates to the diff page on the client you could just show a loading indicator before navigation occurs and remove it after navigate.

Also, another option is to only fetch the first X amount of diffs in your load then fetch the rest in the client. I believe this is how GitHub does it for large diffs?

[theetrain]

That is good alternative thinking. I'll probably apply that to my use case and will come back to summarize and close this discussion. Showing a load indicator on beforeNavigate when the next page is known to take a long time, combined with a partial response is an effective strategy for improving perceived performance without sacrificing SSR.

[theetrain]

Thank you @s3812497 and @danawoodman for your suggestions. I've concluded that different situations may call for different solutions when it comes to presenting placeholder data while critical data is taking longer than usual to load; and it isn't necessarily the responsibility of SvelteKit's load method to provide intermediate states.

Custom intermediate state while a page loads

For my needs, displaying a 'loading' message of some kind while transitioning to a new page can be achieved with a custom loading flag, beforeNavigate, and afterNavigate in a wrapping layout. Here is a rough demonstration of that effect: https://stackblitz.com/edit/sveltejs-kit-ssr-states?file=src%2Froutes%2Fmerge-request%2F%2Blayout.svelte

<script>
  import { beforeNavigate, afterNavigate } from '$app/navigation'

  // ...

  let loading = false

  beforeNavigate((nav) => {
    loading = true
  })
  afterNavigate(() => {
    loading = false
  })
</script>

<!-- ... -->

{#if loading}
  Loading...
{:else}
  <slot />
{/if}

✅ everything is server-side rendered
✅ the user receives immediate feedback during the transition

Using {#await} while a client-side fetch is pending

The example shared in #7119 (comment) demonstrates a straightforward Svelte await template:

<script>
  const fetching = fetch('https://someurl.com/thing').then(res => {
    if (!res.ok) throw new Error('no bueno')
    return res.json()
  })
</script>

{#await fetching}
  <p>Loading...</p>
{:then data}
  <p>{JSON.stringify(data, 2)}</p>
{:catch error}
  <p>{error.message}</p>
{/await}

✅ great for most needs
✅ this works perfectly well for CSR or static sites

[austins]

One can also check the type to only show the loading indicator on client-side navigation but not the initial load (similar to how tRPC with TanStack Query uses react-ssr-prepass):

beforeNavigate(({ type }) => {
    if (type !== "unload") {
        loading = true;
    }
});

afterNavigate(({ type }) => {
    if (type !== "unload") {
        loading = false;
    }
});

If a fetch in a load function takes a long time, it might help with web crawlers from indexing the loading indicator for SEO -- not sure how long of a wait until web crawlers bail out. On the other hand, not checking the type will paint the page faster for the user so it depends on the desired UX.

[theetrain]

Thanks @austins for the extra tip!