Where in the world? react next tailwind axios reactQuery

Nice challenge, making you use an external api.

Some observations about the challenge: Building the front page needed some knowledge on css grid to handle the responsive layout(im still not 100% on my answer here, its ugly when only 2 cards appear). I implemented the searchbar input filtering with useDefferedState to not block the UI when changing the input and rerendering the cards on screen. It helps but still not as good as i wanted, so i add an intersectionObserver to deal with cards not being displayed on screen where when the card is not on screen i render a dummy card without country information/flag image, this made the page more reactive. Adding to it i built an infinite scroll hook also using intersectionObserver to limit the data being rendered on screen just waiting for the user to scroll down and show more cards, all this changes helped to make switching theme colors more responsive, before that the theme change was stuttering. I made the country card and country page as component composition to make it easier to change stats(add, remove or change places). I was thinking on adding dummy data when waiting the api response but another time

Any feedback to this challenge is appreciated.