使用 Semantic UI React 加载屏幕

Question

I'm trying to display a loading screen while the rest of the App complete loading using Semantic UI React.

The problem is that when i load the page it shows only the text "Loading" and it renders the Loader properly only after a few seconds like if it didn't have any css. The purpose of having a loader is that it has to be in front of the page while other content renders but if it has the same problem I don't know how to show content only when it rendered and ready to be displayed.

I'm using this code from the semantic ui react webpage ( 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;

What can I do in order to display content only when it's done rendering?

Answer 1

Try putting it in a Segment . Furthermore I wouldn't use the technique you use to display or hide things, what I always do is:

{condition && <Component />}

So in this case your code would be:

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

and

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

And then of course set loading to false whenever your API calls are finished.

I hope this helps you and answers the question, if not please point it out:).