Como faço para adicionar um site tela de carregamento em ReactJS?

Eu sou muito novo para ReactJs, JS e, basicamente, todos do desenvolvimento da web. Estou tentando criar uma única página da carteira de site usando ReactJS e queria experimentar algumas técnicas mais avançadas, tais como a utilização de ganchos. Eu queria criar um simples efeito de uma animação, desempenha uma vez (quando um usuário faz logon pela primeira vez no meu site), então eles são trazidos para o site principal. Todos os recursos que eu encontrei on-line se relacionam com as telas de carregamento, enquanto a obtenção de dados a partir de uma API. Aqui é o meu código para a tela de carregamento:

import Typical from 'react-typical';
import "./Loading.scss";
import {useState, useEffect} from 'react';

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

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    },18000);

  }, [])

        return (
      <div>
        <h1 id="loading">
          { loading ?  <Typical oop={1} wrapper = 'p'
          steps={[
              "Hello",
              2000,
              "My name is Leonard.",
              3000,
              "I am an aspiring developer",
              3000,
              "Welcome to my website!",
              3000,
            ]} /> : null}
        </h1>
      </div>
    );

}

Eu estou usando uma forma muito simples de reagir pacote chamado típico que dá uma bela animação de palavras que está sendo digitado na tela como uma máquina de escrever, então é excluído e, em seguida, o próximo bit de texto é mostrado etc.. isso só loops de uma vez. Eu usei o useState e useEffect ganchos com um timer para setLoading para false no 18 anos, que é quando a animação pára. Como você pode ver eu renderizar a animação só se o carregamento for verdadeira, usando um operador ternário, em seguida, uma vez que o carregamento é definida como false, então, nula é exibida. Meu app.js este aspecto:

import Nav from './Components/Nav';
import "./App.scss";
import Loading from './Components/Loading';

function App() {
  return (
    <div>
      <Loading /> 
      <main>
      <Nav/>
      </main>

    </div>

    
  );
}

export default App;

(Desculpas pelo terrível JSX). O problema que estou tendo é que tanto a barra de navegação e o carregamento de cargas de tela ao mesmo tempo. Eu não tenho certeza como ocultar todos os meus outros componentes até que a animação terminar. Tudo que eu tento é waaay complicados e realmente não parece muito eficiente para todos. Agradeço qualquer ajuda, obrigado!