Static adapter - initial locale does not work with @html calls

[vukasinpetrovic]

Hi, first of all thank you for amazing library. I implemented it for a website (one page) that uses static-adapter and it works as expected. Language switcher changes text instantly and that is fine.

What I implemented is that when language is changes, chosen locale is saved to localStorage and it is read in "load" function of my layout when calling loadTranslations function. It loads the translations and applies them immediatelly, but for some reason only applies to regular {$t('key')} calls. If I use @html call like {@html $t('key')}, it shows only default language for those calls. I tries what I could, but I cannot seem to solve this. Any help is appreciated.

EDIT: I'm not generating separate pages for each language, only changing text on that single page. Here is the link for the preview of the website so you can get a better understanding https://fitnestapp-cp.netlify.app/

I'll attach some code block that I have.

<div class="max-w-[60rem] my-7.5 md:my-5 text-white">
        <h1 class="text-6xl md:text-7xl lg:text-8xl spacing tracking-[-0.1875rem] text-shadow">
            {@html $t('hero.main_heading')} <!-- This one DOESN'T get translated on page load -->
        </h1>
        <p class="text-lg leading-7 mt-6 pe-0 md:pe-60 lg:pe-88">
            {$t('hero.sub_heading')} <!-- This one DOES get translated on page load -->
        </p>
    </div>

// +layout.js
import { loadTranslations } from '$lib/translations';
import { browser } from '$app/environment';

export const prerender = true;

export const load = async ({ url }) => {
    const initLocale = (browser && localStorage !== undefined && localStorage.getItem('language')) || 'en';
    await loadTranslations(initLocale);

    return {};
};

// translations.js
import i18n from 'sveltekit-i18n';
import en from '../lang/en.json';
import sr from '../lang/sr.json';
import { dev } from '$app/environment';

/** @type {import('sveltekit-i18n').Config} */
const config = {
    log: {
        level: dev ? 'warn' : 'error',
    },
    translations: {
        en: en,
        sr: sr
    },
};

export const { t, locale, locales, loading, loadTranslations, setLocale } = new i18n(config);

// LanguageSwitcher.svelte
<script>
    import { t, locales, locale, setLocale } from '$lib/translations';
    import { browser } from '$app/environment';

    function switchLanguage(lang) {
        setLocale(lang);
        if (browser && localStorage !== undefined) {
            localStorage.setItem('language', lang);
        }
    }
</script>

<div class="group relative">
    <div class="flex items-center cursor-pointer">
        <img src="/icons/lang/{$locale}.png" alt="English" class="w-5 h-5 rounded-full" />
        <span class="text-white uppercase ms-1.5 me-2.5">{$locale}</span>
        <img src="/icons/caret.svg" alt="Language Caret" />
    </div>
    <div class="hidden group-hover:flex absolute top-full right-0 w-max flex-col gap-2 bg-white rounded-2xl p-6">
        {#each $locales as value}
            <button on:click={() => switchLanguage(value)} class="flex items-center gap-2">
                <img src="/icons/lang/{value}.png" alt="English" />
                <span>{$t('languages.' + value)}</span>
            </button>
        {/each}
    </div>
</div>