我們的 AI 用藥監控系統已經具備了強大的核心功能，不僅能儲存用藥資料，還能提供專業且排版精美的 AI 建議。但在真實世界的應用程式中，我們不能只考慮「順利運作」的情境，還要處理各種邊緣情況 (Edge Cases)。

今天，我們要把重點拉回前端的使用者體驗 (UX)，為系統加上更完善的防呆機制。具體來說，我們要處理兩種情境：當使用者還沒加入任何藥物就點擊 AI 分析時的「空狀態 (Empty State)」，以及呼叫 API 時的「載入中 (Loading) 視覺回饋」。

為什麼需要處理空狀態與載入狀態？
1.空狀態防呆：如果使用者清單是空的，我們把空字串傳給 Gemini，不僅浪費 API 額度，還可能讓 AI 產生困惑的回覆。我們應該在前端直接攔截這個動作。
2.載入中視覺回饋：呼叫外部 API 通常需要 1 到 3 秒。如果按鈕點下去毫無反應，使用者可能會以為系統壞了而瘋狂連點。提供明確的「載入中」動畫，能有效降低使用者的焦慮。

Step 1：升級 AIPanel.jsx 的狀態與邏輯
我們在之前的實作中，其實已經初步預留了 isLoading 狀態，現在我們要讓它的視覺效果更好，並且強化空狀態的阻擋邏輯。
打開 src/components/AIPanel.jsx，寫下強化版的程式碼：

這次升級帶來了哪些改變？
1.按鈕禁用機制 (Disable)： 當清單沒有任何藥物時，按鈕會呈現灰色不可點擊的狀態，直接從視覺上防止無效的 API 請求。
2.加入 Loading 轉圈動畫： 在按鈕內加入了一個小巧的 SVG 旋轉動畫，讓使用者明確知道系統正在努力運算。
3.加入骨架屏 (Skeleton Loading)： 這是現代前端非常流行的 UX 技巧。在等待 AI 回覆的區域，我們不只顯示文字，而是顯示淡紫色的漸層色塊動畫，模擬文字即將載入的感覺。
4.獨立的錯誤狀態 (Error State)： 新增了 error 狀態來專門處理並顯示紅色的錯誤提示，將正常內容與異常提示清楚分開。