使用Semantic UI React加载屏幕

Question

我正在尝试显示一个加载屏幕，而应用程序的其余部分则使用语义UI React完成加载。

问题是当我加载页面时，它只显示文本"；加载"；它只在几秒钟后正确地渲染Loader，就像它没有任何css一样。有一个加载程序的目的是，当其他内容呈现时，它必须在页面前面，但如果它有同样的问题，我不知道如何只在呈现并准备显示内容时才显示。

我使用的是来自语义ui react网页的代码(https://react.semantic-ui.com/elements/loader/#types-装载机(

function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000)
}, [])

return (
<div>
<div style={{ display: loading ? "block" : "none" }}>
<Dimmer active>
<Loader content='Loading' />
</Dimmer>
</div>
<div style={{ display: loading ? "none" : "block" }}>
// Content that needs time to render
</div>
</div>
)
}
export default App;

只有在内容完成渲染后才能显示内容，我该怎么办？

Answer 1

尝试将其放入Segment中。此外，我不会使用你用来显示或隐藏东西的技术，我一直做的是：

{condition && <Component />}

因此，在这种情况下，您的代码将是：

{loading === true && <Segment><Dimmer active><Loader content='Loading' /></Dimmer></Segment>}

和

{loading === false && <>
{/* Content that needs time to render */}
</>}

当然，当API调用完成时，将loading设置为false。

我希望这能帮助你并回答问题，如果不能，请指出：(。