'ant-design button displaying with spinning icon

In my nextjs project, i use ant-design. However, whenever i use the Button component, it displays with a spinning icon near it. I can manually remove the spinning icon using display: none; etc but i would like to know what caused it in the first place.

Here's my globals.css

/* Import ant design styles */
@import '~antd/dist/antd.css';


:root {
  --pink: #ea4c89;
  --blue: #40a9ff;
  --black: rgb(26, 32, 44);
  --text: #535c68;
}

html,
body {
  padding: 0;
  margin: 0;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  /* font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", 
    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; */

  /* background-color: wheat; */
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

_app.tsx

import '../styles/tailwindImports.css'
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'


function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

In my Home.tsx, i used the Button component.

import type { NextPage } from 'next'
import Head from 'next/head'
import { Button } from 'antd'


const Home: NextPage = () => {
  return (
    <section>
      <Head>
        <title>title...</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.png" />
      </Head>

      <main>
        <Button>Feedback</Button>
      </main>
    </section>
  )
}

export default Home

This is basically how the button is rendered(with a spinning icon)
Here's the rendered code(from the browser console)

<button type="button" class="ant-btn ant-btn-default popover" ant-click-animating-without-extra-node="false"><span class="ant-btn-loading-icon"><span role="img" aria-label="loading" class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-leave ant-btn-loading-icon-motion"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span><span>Feedback</span></button>

What could be the cause of the problem ?! I also tried adding the loading={false} prop to the Button but to no avail.

reactjsbuttonantd


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions