在按下按钮直到API响应后，在SemanticUI Message中显示加载图标

Question

我正在制作一个应用程序，使用API来创建标题，并将其放在语义UI消息中。

只要我按下按钮，我想要一个加载图标出现，然后消失一次titleText。长度比;0. 我该怎么做呢?

这是我的代码没有图标。

import React, { useState } from 'react';
import { Button, Header, Message, Icon} from 'semantic-ui-react'
export default function Writer() {
const [titleText, setTitleText] = useState('');
const getResponse = () => {
//Does Some Stuff
}).then((response) => {
setTitleText(response.data.choices[0].text)
})
return (
<div>
<Button onClick={getResponse}></Button>

<Message visible={titleText.length > 0} hidden={titleText.length === 0}>
<Header
icon textAlign='center'
content={titleText}
/>
</Message>

</div>
)
}

这是我想添加的:

const [loading, setLoading] = useState(false);

我将此添加到API响应函数的开头:

const getAPIResponse = () => {
setLoading(true)

我还创建了另一条消息，它应该只在第一次按下按钮后出现，并在收集API响应后消失:

<Message visible={loading === true} hidden={titleText.length > 0}>
<Icon name='circle notched' loading />
</Message>

Answer 1

你可以试试这个(我不知道语义UI):

<Message class={` ${loading ? 'visible' : 'hidden'} `}>
<Icon name='circle notched' loading />
</Message>