使用 Semantic UI React 加载屏幕

Posted 2023-02-22

【中文标题】使用 Semantic UI React 加载屏幕

【英文标题】：Loading screen using Semantic UI React

【发布时间】：2021-07-21 20:39:42

【问题描述】：

我正在尝试显示加载屏幕，同时使用 Semantic UI React 完成应用程序的其余部分加载。

问题是，当我加载页面时，它只显示文本“正在加载”，并且它仅在几秒钟后正确呈现加载器，就像它没有任何 css 一样。拥有一个加载器的目的是它必须在页面前面，而其他内容呈现，但如果它有同样的问题，我不知道如何只在内容呈现并准备好显示时显示内容。

我正在使用语义 ui 反应网页 (https://react.semantic-ui.com/elements/loader/#types-loader) 中的此代码

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;

我该怎么做才能仅在完成渲染时显示内容？

【参考方案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。

希望对您有所帮助并回答问题，如果没有请指出:)。