Wrong breadcrumb rendered in sveltekit - sveltekit

Question

What I want
is to have a Breadcrumb component rendered in the __layout.svelte and using a writable store $breadcrumb to read the data to display. The $breadcrumb data is filled in every route.svelte file with data provided by a loader
The problem
When the page is served (yarn dev) or rendered (yarn build with adapter-static) the breadcrumb has the data from another route and then gets updated when the page is rehydrated. Basically, it looks like the Breadcrumb.svelte component is rendered before the data is loaded in the view hence using the old store value from the previous page.
Rendering the Breadcrumb component from every single route fixes the issue but I would like to keep it in the __layout file.
Any idea on what to do ?
The code
__layout.svelte
<script>
import Breadcrumb from '../components/Breadcrumb.svelte'
</script>
<div class="wrap">
<MainMenu />
<div class="container">
<Breadcrumb />
<slot />
</div>
...
store.js
import { writable } from 'svelte/store';
export const breadcrumb = writable({});
components/Breadcrumb.svelte
<script>
import { breadcrumb } from '$lib/store';
</script>
{#if Object.keys($breadcrumb).length}
<ul class="breadcrumb noprn">
<li>Accueil</li>
{#each Object.entries($breadcrumb) as [label, url] (label)}
<li>
{#if url}
<a href={url}>{label}</a>
{:else}
<h1>{label}</h1>
{/if}
</li>
{/each}
</ul>
{/if}
routes/product/[id].svelte
<script>
export let reference; // << the data comes in here
let product = reference.product;
import { breadcrumb } from '$lib/store';
$breadcrumb = {
Catalogue: '/catalogue',
[reference.category.name]: `/catalogue/${reference.category.slug}`,
[reference.brand.name]: `/catalogue/brands/${reference.brand.id}`,
[product.name]: null
}
</script>
...