レシピデータの取得中にはローディングを表示するようにします。componentsフォルダにLoading.tsxを作ってください。

次のコードを書いてください。ここではアローfunctionの省略記法を使っています。

// Loading.tsx

const Loading = () => <div className="loading"></div> 

export default Loading

App.tsxに次のコードを追加します。

// App.tsx

import { useState } from "react"
import Header from "./components/Header"
import Form from "./components/Form"
import Recipe from "./components/Recipe"
import Loading from "./components/Loading"     // 追加
import "./App.css"

const App = () => { 
    const [loading, setLoading] = useState(false)   // 追加
    const [mealName, setMealName] = useState("")
    ...

データの取得が始まったらtrue、完了したらfalseとするので、次のように使います。

const getMealData = async(e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault() 
    setLoading(true)     // 追加
    
    ...

    setMealName("")
    setLoading(false)    // 追加
}

loadingstateがtrueの時にはLoadingコンポーネントが、falseの時にはRecipeコンポーネントが表示されるようにしたいので、次のように条件を書きます。

// App.tsx

    ...

    <Form setMealName={setMealName}
          getMealData={getMealData}
          mealName={mealName}
    />  
    // ⬇追加
    {loading ? 
        <Loading/> 
        : 
        <Recipe mealData={mealData}/>
    } 
    // ⬆追加
</div>
...

これでデータ取得中にはローディングが表示されるようになりました。次はLayoutコンポーネントを作りましょう。