Serious lag in dismissing custom toasts

[mclean25]

When I use toast.custom(), there's significant lag between firing the toast.dismiss() and the toast actually being dismissed in the DOM. See this video below:

https://user-images.githubusercontent.com/7105182/142970722-cbccb01b-91a7-4e1a-8079-9fffab205aef.mp4

Code

test.tsx

import React from "react";
import toast from "react-hot-toast";
import SuccessToast from "../components/toasts/SuccessToast";

const Test: React.FC = () => {
  const notify = () =>
    toast.custom(
      (t) => <SuccessToast toast={t} onDismiss={() => toast.dismiss(t.id)} />,
      {
        duration: 3000,
        position: "top-right",
      }
    );
  return (
    <div className="flex flex-col space-y-4">
      <button onClick={notify}>Custom toast</button>
      <button
        onClick={() =>
          toast((t) => (
            <span>
              Custom and <b>bold</b>
              <button onClick={() => toast.dismiss(t.id)}>Dismiss</button>
            </span>
          ))
        }
      >
        Regular Notify
      </button>
    </div>
  );
};

successToast.tsx

import { Toast } from "react-hot-toast";

interface SuccessToastProps {
  toast: Toast;
  onDismiss: () => void;
}

const SuccessToast: React.FC<SuccessToastProps> = ({ toast: t, onDismiss }) => {
  return (
    <div
      className={`${
        t.visible ? "animate-enter" : "animate-leave"
      } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
    >
      <div className="flex-1 w-0 p-4">
        <div className="flex items-start">
          <div className="flex-shrink-0 pt-0.5">
            <img
              className="h-10 w-10 rounded-full"
              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
              alt=""
            />
          </div>
          <div className="ml-3 flex-1">
            <p className="text-sm font-medium text-gray-900">Emilia Gates</p>
            <p className="mt-1 text-sm text-gray-500">
              Sure! 8:30pm works great!
            </p>
          </div>
        </div>
      </div>
      <div className="flex border-l border-gray-200">
        <button
          onClick={onDismiss}
          className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
        >
          Close
        </button>
      </div>
    </div>
  );
};

_app.tsx

import type { AppProps } from "next/app";
import React from "react";
import { Toaster } from "react-hot-toast";
import { QueryClient, QueryClientProvider } from "react-query";
import { Provider } from "react-redux";
import "tailwindcss/tailwind.css";
import ModalWrapper from "../components/layout/ModalWrapper";
import ProtectedWrapper from "../components/ProtectedWrapper";
import SessionWrapper from "../components/SessionWrapper";
import { store } from "../store/root";

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  const child = pageProps.protected ? (
    <ProtectedWrapper>
      <Component {...pageProps} />
    </ProtectedWrapper>
  ) : (
    <Component {...pageProps} />
  );
  return (
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
        <ModalWrapper>
          <SessionWrapper>{child}</SessionWrapper>
          <Toaster />
        </ModalWrapper>
      </QueryClientProvider>
    </Provider>
  );
}

export default MyApp;

[mclean25]

If I change toast.custom() to toast(), the lag disappears but the styling breaks.

[timolins]

This is due to the fact that toast.custom() has no animations per default, but leaves the element in the DOM for 1s to play your own.

I can see you are using animate-enter & animate-leave from the example page, which are not part of Tailwind by default. You can find the definition here: https://github.com/timolins/react-hot-toast/blob/main/site/tailwind.config.js#L21-L39

The issue should be fixed by adding these animation, or by providing your own.

Issue #116 talks about adding default animations to toast.custom(). Feel free to voice your opinion there.

[alor]

I have the same issue. I'm not using tailwind... just custom divs. is it possible to just hide the toast.custom() on close without any animation or waiting for 1s before closing? it's really frustrating...

[seanonthenet]

🙏 Please can we have an option of those default animations to custom toasts 🙏

[bartschriever]

I am also experiencing this problem. Is there any solution for this? I am not using Tailwind but custom divs with css.