I have built a React website that initially loads data from the server. This data is needed for rendering the website. During loading the data the website shows the following loading screen with a rotating circle.

When I test the website with PageSpeed Insights I get the NO_FCP Error. When I add the text "Loading" below the rotating loading circle, then the Error does not appear. BUT: PageSpeed dosen't wait until the data is fetched and the actual content is rendered. I guess it assumes that the loading screen is the actual page content. It validates the loading screen only. On the rendering pictures on the Page Speed Insights timeline one can see that there is only the loading screen.

This is a snippet of App.js:

  useEffect(() => {
    apiService.post('/api/init', {}).then((res) => {
      ...
      ...
      ...
      setInitialDataLoaded(true)
    });
  }, []);
  if (initialDataLoaded) {
    return (
      <Router>
        ...
      </Router>
    );
  }
  return (
    <div className="initial-app-load-container center"><Spinner /></div>
  );

I'm afraid search engine bots will get the same error and not index the page. What can I do to make Lighthouse wait until the actual content of the page is rendered? I've already read other threads about this that recommend testing it via the developer tools and in incogito mode, but that doesn't solve the actual problem.