Fix/toast firefox compatibility

[ddoemonn]

Toast Cross-Browser Compatibility Fix

Problem

Screen.Recording.2024-11-15.at.13.24.11.mov

The toast notification system exhibited inconsistent behavior in Firefox when displaying success messages via useActionState. While the implementation worked correctly in Chrome, Firefox would often fail to display success toasts reliably. This behavior created challenges in maintaining a consistent user experience across browsers.

Problematic Code Block with useActionState

const [state, action, isPending] = useActionState(async (_, payload) => {
  const result = await login(payload);

  if (result?.success) {
    toast({
      title: 'Başarılı',
      description: 'Giriş başarılı.',
      variant: 'default',
      duration: 4000,
    });
  } else {
    toast({
      title: 'Hata',
      description: result?.response?.message || 'Bir hata oluştu.',
      variant: 'destructive',
      duration: 4000,
    });
  }

  return result;
});

---

Solution

The issue was identified to stem from timing inconsistencies and toast management logic. To resolve this:

1. Refactored Toast Logic
   The toast logic was updated to ensure consistent rendering and lifecycle management across all browsers.

   • Added a toast clearing mechanism (clearExisting) to ensure no overlapping or stale toasts are present when a new toast is triggered.
   • Adjusted the toast animation and dismissal flow to accommodate the behavior differences between Chrome and Firefox.

2. Defined Constants for Animations and Duration
   Introduced TOAST_REMOVE_DELAY and ANIMATION_DURATION for controlling the timing of toast display and transitions, ensuring smoother animations across browsers.

3. Optimized State Management
   Improved the state management logic to handle concurrent toasts effectively:

   • Used setTimeout with consistent handling of dismissal and removal.
   • Introduced safeguards to avoid duplicated or orphaned toasts in memory.

---

[vercel]

@ddoemonn is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.