How to use async with runes?

i had a synchronous search that i used like

let searchResults = $derived.by(() => { const lower = searchTerm.toLowerCase(); const results: MockData = {};

for (const key in mockIndexData) { if (key.toLowerCase().includes(lower)) { results[key] = mockIndexData[key]; } }

return results; });

this worked great!

however my search is now async, and im not sure of the best practice?

i tried this

let searchResults = $derived.by(() => { const promise = search(searchTerm);

return promise; });

combined with the await block

{#await searchResults then results} ... {/await}

but this shows a blank page while the search is happening, instead of showing the previous results like in the synchronous example. How can i achieve the same behaviour as the sync version?

i can get it to work with $effect, but i keep reading to avoid effect unless it is truly a side effect and not just normal dom stuff