You can add a loading state, which by default is set to true. After you finish fetching the data from the api you can set loading to false and then render the page.

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

useEffect(() => {
    const fetchOrdersData = Promise.all().then((data) => {
        //Fetch all data
        .....
        //Render page after loading is false
        setLoading(false);
    }).catch()
}, [])

Issue

Found a few issues:

1. Primary Issue: The fetchApi function's Promise.all chain was immediately invoking setFetched(true) instead of waiting for the chain's thenable to invoke it. This is why you are seeing the empty table before the data has been fetched and processed.

   const fetchApi = () => {
     const characters = [];
     Promise.all(
       [api].map((api) =>
         fetch(api)
           .then((response) => response.json())
           .then((data) => characters.push(...data.results))
           .then((data) => fetchOtherData(characters))
           .then(setFetched(true)) // <-- immediately invoked
       )
     );
   };
   

2. fetchOtherData function is also synchronous and doesn't return a Promise so the outer Promise-chain in fetchApi doesn't wait for the processing to complete, this is why you still see URL strings instead of the resolved values from the fetch.

Solution

Fix the Promise chain in fetchApi to be invoked in the .then callback. Rework the logic in fetchOtherData to wait for the additional fetch requests to resolve.

Here's my suggested solution:

const api = `https://swapi.dev/api/people/`;

function App() {
  const basicClassName = "starWarsApi";
  const [characters, setCharacters] = useState([]);
  const [fetched, setFetched] = useState(false);

  useEffect(() => {
    const fetchOtherData = async (characters) => {
      const characterReqs = characters.map(async (character) => {
        const { homeworld, species, starships, vehicles } = character;
        const urls = [homeworld, ...species, ...vehicles, ...starships];

        // Make shallow copy to mutate
        const characterWithAllData = { ...character };

        const urlReqs = urls.map(async (url) => {
          if (url.length) {
            try {
              const response = await fetch(url);
              const { name } = await response.json();
              if (url.includes("species")) {
                characterWithAllData.species = name;
              }
              if (url.includes("planets")) {
                characterWithAllData.homeworld = name;
              }
              if (url.includes("vehicles")) {
                characterWithAllData.vehicles.shift();
                characterWithAllData.vehicles.push(name);
              }
              if (url.includes("starships")) {
                characterWithAllData.starships.shift();
                characterWithAllData.starships.push(name);
              }
            } catch (err) {
              console.error(err);
            }
          } else {
            if (url.includes("species")) {
              characterWithAllData.species = "Unspecified";
            }
            if (url.includes("vehicles")) {
              characterWithAllData.vehicles = "";
            }
            if (url.includes("starships")) {
              characterWithAllData.starships = "";
            }
          }
        });

        await Promise.all(urlReqs); // <-- wait for mutations/updates
        return characterWithAllData;
      });

      return Promise.all(characterReqs);
    };

    const fetchApi = () => {
      Promise.all(
        [api].map((api) =>
          fetch(api)
            .then((response) => response.json())
            .then((data) => fetchOtherData(data.results))
            .then((charactersWithAllData) => {
              setCharacters(charactersWithAllData);
              setFetched(true);
            })
        )
      );
    };
    fetchApi();
  }, []);

  return (
    <div className={basicClassName}>
      {fetched && (
        <>
          <h1 className={`${basicClassName}__heading`}>Characters</h1>
          <div className={`${basicClassName}__inputsAndBtnsSection`}>
            <FilteringSection
              basicClassName={`${basicClassName}__inputsAndBtnsSection`}
            />
            <ButtonsSection
              basicClassName={`${basicClassName}__inputsAndBtnsSection`}
            />
          </div>
          <CharactersTable characters={characters} />
        </>
      )}
    </div>
  );
}