[BUG] - Button loading state causes insertBefore NotFoundError when DOM is modified by browser translation (Google Translate)

HeroUI Version

3.0.3

Describe the bug

When using HeroUI Button with the loading state, the application crashes with a React DOM error: NotFoundError: Failed to execute 'insertBefore' on 'Node':

The node before which the new node is to be inserted is not a child of this node.

This issue occurs in real-world scenarios when the page is affected by external DOM mutations such as browser translation (e.g. Google Translate extension or Chrome page translation feature).

The crash happens during React reconciliation when the Button enters or exits the loading state while the DOM structure is being modified externally.

This seems to affect the internal rendering logic of the Button component when isLoading is used.

Your Example Website or App

https://heroui.com/docs/react/components/button#loading-state

Steps to Reproduce the Bug or Issue

1. Open the official HeroUI Button documentation: https://heroui.com/docs/react/components/button#loading-state

2. Scroll to the "Loading State" example.

3. Enable browser translation (e.g. Google Translate / Chrome "Translate page").

4. Translate the page to another language (e.g. Arabic).

5. Click the Button that uses isLoading or loading state.

6. Observe the application crash in the browser console.

Expected behavior

The Button component should handle loading state transitions safely and remain stable even in environments where the DOM is being modified externally (e.g. browser translation extensions).

No runtime crash or React reconciliation error should occur during or after the loading state change.

Screenshots or Videos

https://github.com/user-attachments/assets/160f7fe4-8e63-4a3d-b159-0646e4743311

Operating System Version

windows

Browser

Chrome