現在網站已經可以呼叫 AI 產生食譜，但我發現一個使用上的問題：AI 產生內容需要等待，如果使用者按下按鈕後畫面完全沒有變化，可能會以為網站沒有反應。

因此，今天要加入 Loading 載入提示。

一、建立載入提示區域

在 HTML 中加入：

<p id="loading" hidden>
     AI 正在幫你想食譜，請稍候……
</p>

二、修改推薦函式

在 script.js 中找到推薦功能，加入載入狀態：

const loading = document.querySelector("#loading");

async function recommendRecipe(ingredients) {
    loading.hidden = false;
    recipeResult.replaceChildren();

    try {
        const answer = await getAIRecipe(
            ingredients.join("、")
        );

        recipeResult.textContent = answer;

    } finally {
        loading.hidden = true;
    }
}

這裡使用 try...finally，確保不論請求成功或失敗，載入提示都會被關閉。

三、今天的成果

現在使用者按下推薦按鈕後，畫面會出現等待提示，AI 回答完成後再顯示結果。

這個功能雖然不會直接提升 AI 的回答能力，但能讓使用者知道網站正在處理請求。

下一篇要加入錯誤處理，讓網站遇到問題時也能給出清楚的提示。