como implementar corretamente o carregamento da mensagem no envio ou busca de dados no reactjs

O código abaixo busca dados com sucesso da minha instância do Atlassian usando reactjs.

Agora quero poder exibir uma mensagem de carregamento que será exibida e os dados estão sendo enviados ou buscados, mas não consigo fazê-los funcionar.

eu inicializei

    const [loading, setLoading] = useState(false);
setLoading(true);

Aqui está minha pergunta:

Por favor, onde eu adiciono setLoading(false);

Ou existe outra solução melhor ou de outra forma.

Aqui está o código

aplicativo.js

import React, { useEffect, useState, Fragment } from "react";

function App() {

const [loading, setLoading] = useState(false);
const [data, setData] = useState({});

  useEffect(() => {
//invoke('postdata').then(setData);

setLoading(true);
const dx = {uid: 'NancyMoore'};
 invoke('postdata', dx).then(setData);


}, []);

  return (
    <div>
      <h2> Submited Data</h2>
       
{JSON.stringify(data)}

{loading && <span> data is being submitted  ...</span>}


    </div>
  );
}

export default App;

index.js

import Resolver from '@forge/resolver';
const resolver = new Resolver();

resolver.define('postdata', async (req) => { 
const datax = await storage.set('my-key');
console.log(datax);
return datax;

});

export const handler = resolver.getDefinitions();