reactive-ui-patterns

reactive-ui-patterns 技能為 Svelte 應用程式中的非同步遠端資料管理提供了一種強大的架構方法。它是為構建高性能 CRM 介面的開發人員所設計的，這些介面需要頻繁地進行資料更新而不中斷用戶體驗。透過取代傳統的 {#await} 區塊（通常會導致突兀的組件重載和文件佈局偏移），此模式確保資料轉換能夠流暢地發生，同時保持滾動位置和互動狀態。

此技能專為涉及狀態查詢的場景而設計，將資料儲存在查詢變數中，使 UI 能夠獨立於載入生命週期來回應資料集的變更。強烈建議用於儀表板、資料表格以及任何需要頻繁輪詢或用戶觸發伺服器端資料重新整理的介面。

• 透過 .current 屬性將資料來源與渲染生命週期分離，從而實現流暢的原位 UI 更新。

• 在執行遠端函數期間保持現有的 DOM 節點，防止破壞性的頁面跳動和焦點丟失。

• 實作精細的載入狀態管理，區分組件首次掛載（顯示載入器）與背景刷新操作（應用視覺提示，如透明度變化）。

• 透過棄用頻繁觸發 #await 區塊重繪的模式，推動架構的最佳實踐。

• 將查詢物件捕獲到局部變數中以使用此模式；這對於持續存取 .current 屬性至關重要。

• 在顯示載入指標之前，使用 .current 屬性檢查是否存在現有資料，以確保流暢的「stale-while-revalidate」體驗。

• 透過 query.refresh() 觸發手動更新，確保 UI 與後端變更保持同步，同時將視覺開銷降至最低。

• 在渲染資料陣列之前，務必檢查 query.error 屬性以處理錯誤狀態。

• 避免硬重載組件；目標是僅更新與底層資料儲存綁定的特定 DOM 片段。