One App-Wide Layout and Load Function

[lemmon]

Describe the problem

I am trying to load data only once per application instance. Just before the app is initialized. Current infrastructure suggests that I put this logic in the load funciton in the main __layout.svelte. However, it's not ideal when I mix per-layout data and per-app data within one load function. Another issue occures when I am going back and forth beween some __layout and __layout.reset. Those per-app data get loaded again.

Another problem is when I want to keep some components even when I use layout.reset. Notifications component, for example, which stays mounted even when I reset the parent layout.

Describe the proposed solution

I suggest creating one more file [maybe] called __app.svelte which will follow the same logic as __layout.svelte but it will be available only once per app. Either src/app.svelte or src/routes/__app.svelte.

It will sit above all the layouts. Example:

<script context="module">
export async function load() {
  // load per-application data
}
</script>

<script>
import '../css/index.css' // import global css stylesheet
import { navigating } from '$app/stores' // create app-wide preloader
import Toaster from '$lib/Toaster.svelte' // app-wide toaster component
import Modal from '$lib/Modal.svelte' // modal component

function width() {
  return {
    duration: 400,
    css: (t) => {
      return `width: ${t * 100}%;`
    },
  }
}
</script>

{#if $navigating}
  <div class="n" in:width />
{/if}
<Toaster />
<slot />
<Modal />

<style>
.n {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background-color: var(--blue);
}
</style>

Alternatives considered

Using root-level __layout, however breakes when some __layout.reset is accessed.

Importance

would make my life easier

Additional Information

No response

[rmunn]

This seems like it's mostly a duplicate of #1165 and #2169, though one part of this request isn't a duplicate:

Another problem is when I want to keep some components even when I use layout.reset. Notifications component, for example, which stays mounted even when I reset the parent layout.

This part of the request is something I haven't seen in any other feature request, to the best of my knowledge.

[mrkishi]

This is now possible with (rather advanced, don't freak out) usage of named layouts:

/src/routes/
  /__layout-app.svelte             # your app-wide layout, holds components and `load()`ed data
  /[email protected]             # your default layout, goes inside app-wide layout `/__layout-app.svelte`
  /[email protected]       # an empty <slot/> layout, goes inside app-wide layout `/__layout-app.svelte`
  /some/regular/page.svelte        # goes inside layout `/[email protected]`
  /some/random/[email protected]   # goes inside reset layout `/[email protected]`