Shows Same Toast in page refresh or navigation

[bakikucukcakiroglu]

I wonder if there is an automized way of showing toasts or we should remove displayed toasts?

export async function loader({ request }: LoaderFunctionArgs) {
  const { getTheme } = await themeSessionResolver(request)
  const { toast, headers } = await getToast(request);

  return {
    theme: getTheme(),
    _toast: toast,
    headers
  }
}

export default function AppWithProviders() {

  const { theme, _toast } = useLoaderData<typeof loader>();

  useEffect(() => {
    if (_toast) {
      if (_toast.type === 'success') {
        toast({ title: "Success", description: _toast.message });
      } else {
        toast({ title: "Error", description: _toast.message });
      }
    }
  }, [_toast])

  return (
    <TooltipProvider>
      <ThemeProvider specifiedTheme={theme} themeAction="/action/set-theme">
        <App />
      </ThemeProvider>
    </TooltipProvider>
  )
}

[bakikucukcakiroglu]

I noticed that the library already does it using header. The way I returned the headers was wrong. This is a very obvious mistake but I'll keep this issue with the solution below for those who may do something like that.

return { theme: getTheme(), _toast: toast, headers} return json({ theme, toast }, { headers });