I am having an issue with messageStore which is a simple writable(“”). I use it to display any messages in +layout.svelte

<script>
    import '../app.css';
    import NavBar from '../components/NavBar/index.svelte';
    import Footer from '../components/Footer/index.svelte'
    import Message from '../components/Message/index.svelte'
    import { page } from '$app/stores';
    import { messageStore } from '$lib/stores';


</script>

<main class="w-screen h-full flex flex-col bg-white overflow-y">
    <NavBar />
    <Message message={$messageStore} eye="green" eyeBall="blue" />
    <slot />
    <Footer />
</main>

and let’s if there is a user that hasn’t logged in tries to go to /admin, in there I have an easy check function if the user is logged in or not in /admin/+page.server.ts:

import type { RequestEvent } from "@sveltejs/kit";
import { redirect } from '@sveltejs/kit';
import { messageStore, redirectToStore } from "$lib/stores";

export const load = ({locals, url}) => {
    if(!locals.user){
        redirectToStore.set(url.pathname);
        messageStore.set("error.login.required");
        throw redirect(302, "/login");
    }
};

and whenever it redirects it isn’t showing the component in src/component/Message/index.svelte here:

<script>
    import { t } from '$lib/i18n';
    import Eyes from "../Eyes/index.svelte"
    import { messageStore } from '$lib/stores'

    export let eye;
    export let eyeBall;
    export let message;
</script>

{#if message}
    <div class="w-full h-max py-3 bg-red space-x-5 text-white px-6 flex items-center justify-center"> 
        <div class="float-left px-5 py-3">
            <Eyes eye={eye} eyeBall={eyeBall}/>
        </div>
        <h1 class="h-full flex items-center justify-center text-lg"> 
            <h1>{@html $t(message)}</h1>
        </h1>
    </div>
{/if}

I found out if I reload the page fast enough at /login after being redirected automatically from /admin, I can see message for a brief moment.

Does anyone know how to fix this problem with a writable(“”)?