kbrgl / svelte-french-toast

🍞🥂 Buttery smooth toast notifications for Svelte
https://svelte-french-toast.vercel.app/
MIT License
808 stars 28 forks source link

toast reappears after navigation #53

Closed kyoheiu closed 10 months ago

kyoheiu commented 11 months ago

Hi,

I use this library in my project. In a page, click on a button calls save function as below:

export const save = async () => {
    if (newName === '') {
        toast.error('File name required.', {
            duration: 2000
        });
        return;
    }
    const res = await fetch(`/api/save`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            original: data.fileName,
            new: newName,
            content: data.content
        })
    });

    if (!res.ok) {
        const message = await res.text();
        toast.error(`Error occured: ${message}`, {
            duration: 2000
        });
        return;
    }

    toast.success('Saved.', {
        duration: 2000
    });

    data.fileName = newName;
    edited = false;
};

When I navigate to other page before the toast disappears, it reappears for a short time again. How can I fix this?

EDIT: Format code

kyoheiu commented 10 months ago

Sorry, this was my mistake: I'd added <Toaster /> multiple times (to global +layout.svelte and a component). Removing it from the component solved the issue.