Search autocomplete with static and remote data

I am implementing an Autocomplete search field on a website I am working on, this will be the only form field that is shown on the homepage (along with the title and some explainer text). It will also be part of the header navigation on every other page.

The user should be able to search for either a city or country in that search field and then click on one of the results in the autocomplete field to get to the respective city/country page.

The list of countries is relatively small, therefore I was thinking for it to be performant to include that list in my frontend code, so there is no lag from fetching country autocomplete results from the server, while the city autocomplete results will have to be fetched from the server, as the dataset in the frontend would otherwise just be too large.

At the same time, this also causes some UX concerns, as now the UI would be updated 2 times after any keystroke. The first UI update would include the country results + a "fetching cities" message and after cities are loaded, the second UI update would include the complete result-set. I expect a lag of ~100-150ms from my server to fetch those city results.

What is the best UX in this case?

1) Use the solution I just described with the 2 UI updates?

2) Add artificial lag or fetch everything server-side, so that the UI will only update once per keystroke.

3) Another solution not mentioned here.