fix: icon animation when updating toast.loading() to another type (#743)

src/state.ts

@@ -119,7 +119,9 @@ class Observer {
   };
 
   loading = (message: titleT | React.ReactNode, data?: ExternalToast) => {
-    return this.create({ ...data, type: 'loading', message });
+    /** iconAnimationPromise is a no-op used to set data-promise. It triggers icon fade-in on state change. **/
+    const iconAnimationPromise = Promise.resolve();
+    return this.create({ ...data, type: 'loading', message, promise: iconAnimationPromise });
   };
 
   promise = <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>) => {

test/src/app/page.tsx

@@ -76,6 +76,30 @@ export default function Home({ searchParams }: any) {
       >
         Render Promise Toast
       </button>
+      <button
+        data-testid="loading-to-success"
+        className="button"
+        onClick={() => {
+          const toastId = toast.loading('Loading...');
+          setTimeout(() => {
+            toast.success('Loaded.', { id: toastId });
+          }, 2000);
+        }}
+      >
+        Loading to Success Toast
+      </button>
+      <button
+        data-testid="loading-to-error"
+        className="button"
+        onClick={() => {
+          const toastId = toast.loading('Loading...');
+          setTimeout(() => {
+            toast.error('Failed.', { id: toastId });
+          }, 2000);
+        }}
+      >
+        Loading to Error Toast
+      </button>
       <button
         data-testid="rsf-promise"
         data-finally={isFinally ? '1' : '0'}

test/tests/basic.spec.ts

@@ -29,6 +29,24 @@ test.describe('Basic functionality', () => {
     await expect(page.getByText('Loaded')).toHaveCount(1);
   });
 
+  test('toast.loading updated to toast.success via setTimeout preserves promise attribute for animation', async ({ page }) => {
+    await page.getByTestId('loading-to-success').click();
+    const toast = page.locator('[data-sonner-toast]');
+    await expect(toast).toHaveAttribute('data-type', 'loading');
+    await expect(toast).toHaveAttribute('data-promise', 'true');
+    await expect(toast).toHaveAttribute('data-type', 'success');
+    await expect(page.getByText('Loaded.')).toHaveCount(1);
+  });
+
+  test('toast.loading updated to toast.error via setTimeout preserves promise attribute for animation', async ({ page }) => {
+    await page.getByTestId('loading-to-error').click();
+    const toast = page.locator('[data-sonner-toast]');
+    await expect(toast).toHaveAttribute('data-type', 'loading');
+    await expect(toast).toHaveAttribute('data-promise', 'true');
+    await expect(toast).toHaveAttribute('data-type', 'error');
+    await expect(page.getByText('Failed.')).toHaveCount(1);
+  });
+
   test('handle toast promise rejections', async ({ page }) => {
     const rejectedPromise = new Promise((_, reject) => setTimeout(() => reject(new Error('Promise rejected')), 100));
     try {