question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: Button display with loading spinner in react 18 without tooltip

See original GitHub issue

Reproduction link

Edit on CodeSandbox

Steps to reproduce

No need to do any steps / extra effort , anyone can see button by default comes with loading icon if we add loading={false} from button then also we can see loading spinner

What is expected?

  1. Button should display without loading icon
  2. This should display Tooltip.

What is actually happening?

Button is display with loading icon

Environment Info
antd 4.19.3
React 18.0.0
System Ubuntu
Browser Chrome

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:7
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
beeingercommented, Apr 3, 2022

Same thing, all Buttons show up with a loader when upgraded to React v18

3reactions
malkevcommented, Apr 3, 2022

The problem is uncompatibility with ReactDOM.createRoot. This is my index.tsx that cause the problem:

let rootElement = document.getElementById("root")
if(rootElement) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(<StrictMode><App /></StrictMode>)
}

I solved in this way:

ReactDOM.render(
    <App />,
  document.getElementById('root')
);
Read more comments on GitHub >

github_iconTop Results From Across the Web

React - Display loading screen while DOM is rendering?
A workaround is to add the spinner class to the react container, and use the :empty pseudo class. The spinner will be visible,...
Read more >
Spinner component - React-Bootstrap
Spinners. Spinners can be used to show the loading state in your projects. ... Bootstrap offers two animation styles for spinners. The animation...
Read more >
Updates - React PDF Viewer
The `Popover` component has new prop `lockScroll` which indicates whether the `body` element is scrollable or not. · Provide the ability of rotating...
Read more >
Changelog
Breaking changes in components with the Stable badge will not be accepted ... Fixed a bug where browser validation tooltips would show up...
Read more >
Suspense for Data Fetching (Experimental)
Approach 1: Fetch-on-Render (not using Suspense) ... It helps orchestrate displaying the loading states in your UI, but it doesn't tie your network...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found