Difference between element states 'Visible' and 'Stable'

Hello All, We have been using element states like ‘visible’, ‘stable’ from browser library before interacting with elements. Lately, We became curious about how ‘stable’ works since it is not working as we expected. We were under assumption that it checks if element is visible and stable before interacting with it (As per documentation also, That is what it does). Earlier, We used visible alone and we switched to stable thinking that it would give us an advantage of waiting till element is completely ready before interaction and it worked for most of the elements. However, In few cases it is not working and saying element is not stable. So, Would like to understand how stable works behind the scenes with an example.

From playwright, stable refers to state of an element when it is not undergoing any animations, transitions, or other movements. How do we know from DOM if element is not undergoing any animations/movements? Please assist