Disable data-sveltekit-preload-data for language selection

jnsprnw commented 1 year ago

It took me some time to figure that out, so it might help others as well:

Newer versions of Sveltekit (than used in this repo at the moment) enable link preloading by default in the app.html like this:

<body data-sveltekit-preload-data="hover">

That’s good for most cases, but it messes around with the language selection from this library. Instead of completely disabling it, you can also disable it for each link with data-sveltekit-preload-data="off".

LocaleSwitcher.svelte can use it like this:

<ul>
  {#each locales as l}
    <li>
      <a data-sveltekit-preload-data="off" type="button" class:active={l === $locale} href={replaceLocaleInUrl($page.url, l)}>
        {l}
      </a>
    </li>
  {/each}
</ul>

I hope that helps!

ivanhofer commented 1 year ago

Did you check the latest version of the example?

jnsprnw commented 1 year ago

Yes, and it works with this setup. But if you create a new Sveltekit website, it will automatically have <body data-sveltekit-preload-data="hover"> included.

ivanhofer commented 1 year ago

But why would you not want to preload the page in the new language when hovering over it?

ivanhofer / typesafe-i18n-demo-sveltekit-jsdoc

Disable data-sveltekit-preload-data for language selection #4