How to make a preloader with getServerSideProps in Next.js?

Question

React

Help me figure it out, I have a start page where the user gets if he opens the site by domain. At this time, I receive data on the getServerSideProps server, at this time nothing is shown to the user, after cities are drawn, the start page. Cities are Links with a route to DOMAIN/CITY + query parameters. When the transition happens I use NextNprogress it shows the loading from above. When I went to the city page, I again get data on the getServerSideProps server depending on the city, there are different data there, and also, on this page there is a modal in which you can change the city, and by changing the route, new data will be requested again. Question number 1 - how can I show some kind of initial loading, loader, on the first page while data is being loaded from the server. I tried also Router events, I looked at SWR, nothing fits, or I could not figure out how to implement it. Question number 2 - how to track the server load when changing the city, and at that time show pulsing stubs in the places of the updated content. I would like to have some kind of flag, start/end of loading, and draw stubs in between