Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Skeleton for loading page. Server Components.

@Jake-Oz

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

Community feedback

Kenny Ng 400

@kennylun123

Posted

It is a very good use case of using NextJS server side component. I took a reference from your fetching too.

One question for me, how do you manage to scroll to top when every time we go into detail page? Did you do something to keep this behaviour?

0

@Jake-Oz

Posted

Great question @kennylun123

It’s been a while since I did this challenge and I do recall it was an issue but don’t remember how I fixed it. I’ll do some digging.

0

@Jake-Oz

Posted

@kennylun123 I have had another look at the code and don't have a specific way to ensure the scroll is at the top of the page when you go to the detail page. It just seems to work. Are you using the Next JS "Link" component to manage the navigation?

0
Kenny Ng 400

@kennylun123

Posted

Thanks for your update! @Jake-Oz

Yeah, I'm using Link in NextJS too. I found that it'll maintain the scroll position when I revisit the same detail page. Let say I first visit the country Belgium and click back to homepage. And use ctrl+f to search Belgium and go in. You'll notice that scroll position is at the bottom instead of at the top. Not sure if it's about cache.

1

@Jake-Oz

Posted

I can't duplicate this issue @kennylun123 and I haven't done anything unusual with caching (ie. I haven't implemented "no-cache". It may be a browser thing but I don't have the depth of knowledge to help out there. Sorry.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord