Reading through the code, the component inside the Suspense boundary, `SearchResults,` is an async component that doesn't await any promises. It only receives data as props. So the suspense boundary will not be shown, and `BlogSection` is blocked entirely until the data is fetched.
I understand you want to pass the search query to `SearchResults` and display the result?
If so, you can move `getBlogPostList()` down to `SearchResults` and fetch the data in that component.
We have a similar implementation here:
1. `query` is passed to `InvoicesTable` which is wrapped in Suspense:
github.com/vercel/next-learn…
2. `InvoicesTable` fetches its own data, allowing it to suspend while loading:
github.com/vercel/next-learn…
This prevents the page from blocking, and similarly would prevent `BlogSection` from blocking.