Skip to content
Submitted almost 4 years ago

React - Rest Countries

Zuzki•180
@LuisDGracia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

I made this challenge with React, Styled components and react router, there are ton of optimization problems that idk how to solve

for example, all the countries load at the same time making the page take some time to load in special for the images

I would very appreciate any feedback you could make to improve

Community feedback

  • Frank•30
    @h4ckz3rPosted almost 4 years ago

    On that issue that you mentioned about all the images loading at the same time, keep in mind that the attribute "loading" only applies to the <img> tag and also on <iframe> but not on div's.

    And by the look of the design, the only images that should be lazy loaded are the ones from the 3rd row downwards. You can increase the spacing between the cards and also between the text to achieve that effect.

    If you want to learn more about that attribute check out this link https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

    All in all, great work on this solution!

    2
    Zuzki•180
    @LuisDGraciaPosted almost 4 years ago

    @h4ckz3r thanks for the comment and the link, I'll try your suggestion on the future for this solution! 😄

    0

Please log in to post a comment

Log in with GitHub

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