Do not load all countries at first

[m-avagyan]

Countries list do not loaded lazyly.
The countries all list loaded at first at dropdown.

Intersection observer
Using intersection observer we can get if latest element is visible and loaded next countries data.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Performance issues
This happen a excessive DOM size issue

[Sayvai]

I agree. Maybe a virtualised solution to load the list of countries works best(?)

There is noticeably perceptible ~2/3 second delay of rendering the list of countries for each subsequent click to render the countries, which is typically noticeable after the first render of the countries, only when i have Chrome Dev Tools open within the page.

Rendering the list of countries from dropdown select with Chrome Dev Tools open

However, when Chrome Dev Tools is not open, the countries list load performance is much better, although i can somewhat still notice a slight lag, which is just about acceptable(?), but definitely not optimal, and could be improved for a much more snappy user experience ⚡🙏

Rendering the list of countries from dropdown select with Chrome Dev Tools closed

I suppose it could also be machine resource dependent too, whether system resource usage (e.g. CPU) is peaking at the time of interaction.