UI issue when changing route

[Rohith-JN]

Do you want to request a feature or report a bug? Bug

What is the current behavior? There are three routes: type, account & leaderboard. The notification gets called from the account page and has no issue with the UI in that page but before the notification disappears if I route to another page its UI changes.

What is the expected behavior? No UI issues across all pages

Which versions of React, and which browser / OS are affected by this issue? Next.js v13.0.5 Windows Chrome

I am calling the notification here:

{(authUser) ? <MdLogout onClick={async () => {
        await signOut().then(() => {
            router.push("/account").then(() => {
                customToast.success("Signed Out!", toastOptions);
                dispatch(setResult([results[0]]));
            });
        })
    }} /> : null}

customToast

export const toastOptions: ToastOptions<{}> = {
    position: "top-right",
    autoClose: 5000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: false,
    draggable: false,
    progress: undefined,
    theme: "dark",
};

export const customToast = {
    success(msg: string, options: {}) {
        return toast.success(msg, {
            ...options,
            className: "toast-success-container",
            progressClassName: "toast-success-progress",
        });
    },

I placed toastContainer at top level component:

 return (
        <AuthUserProvider>
            <ReduxProvider store={store}>
                <CookiesProvider>
                    <ToastContainer/>
                    <Layout>
                        <Component {...pageProps} />
                    </Layout>
                </CookiesProvider>
            </ReduxProvider>
        </AuthUserProvider>
    );

Github

[Rohith-JN]

It's been a month since I posted this issue and still no response, I am not sure if this is a bug in the library or an issue in my code, either-ways I think I will move to another notification library

[fkhadra]

Hey @Rohith-JN sorry to hear that, quite busy there :(. That being said, I've looked at your repo, the issue is coming from the fact that the stylesheet of react-toastify is totally removed when changing route. I would suggest importing the stylesheet only in one place like _app.tsx.

Wish you the best, nice project you made

[Rohith-JN]

Hey @fkhadra, Thanks for taking the time to look into my repo and for providing your insight. Your suggestion to import the stylesheet only in one place like _app.tsx sounds like a great solution, I'll give it a try.

Thank you for your kind words about my project as well. I'm glad you liked it! I'll do my best to implement your suggestion and resolve the issue.