[Bug]: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition3 which is inside StrictMode.

[rasyidcode]

Tremor Version

3.11.1

Link to minimal reproduction

NA

Steps to reproduce

main.tsx

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom/client'
import { Button } from '@tremor/react'

function TremorButton() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
      setTimeout(() => {
          setIsLoading(false);
      }, 3000);
  }, []);

  return (
      <Button loading={isLoading}>Test</Button>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <TremorButton />
  </React.StrictMode>,
)

What is expected?

No warning.

What is actually happening?

The following warning appears in the console after the loading transition is finished.

console.js:213 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition3 which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at button
    at Transition3 (http://localhost:5173/node_modules/.vite/deps/@tremor_react.js?v=516f14db:40104:30)
    at http://localhost:5173/node_modules/.vite/deps/@tremor_react.js?v=516f14db:41295:17
    at TremorButton (http://localhost:5173/src/main.tsx:250:39)

What browsers are you seeing the problem on?

Chrome

Any additional comments?

No response

[severinlandolt]

cf. reactjs/react-transition-group#893

[kekoawong]

Are there any potential solutions within the tremor community for this - or can we use different props besides the loading prop?

[severinlandolt]

Hey there, there has not been a fix published. We try to fix this in one of the next releases!

[Miodec]

I got the same issue when adding an icon to the tremor button.

[github-actions]

🎉 This issue has been resolved in version 3.13.2-beta-button-transition.1 🎉

The release is available on:

• npm package (@beta-button-transition dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[severinlandolt]

Hi @rasyidcode, @kekoawong, @Miodec.

Can you test if the loading prop works for you in our latest beta release, thanks!

npm i @tremor/react@3.13.2-beta-button-transition.1

[github-actions]

🎉 This issue has been resolved in version 3.13.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀