react, responsive design

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hey man there is some kind of error on the upload that I can't see your page, try editing the solution here on Frontendmentor so we can see the results with the code!

  0

  ---

  

  Oladejo Eniola•150

  @niol08Posted over 2 years ago

  @DavidMorgade The frontendmentor screenshot was taken while it was still fetching data from the API. How do I fix that?

  1

  

  David•8,000

  @DavidMorgadePosted over 2 years ago

  @niol08 Hey! the problem is that the page take quites a bit to load, so FrontEndMentor takes the screenshot at the first moment the page renders, and this moment is when you are displaying the loading gif

  1

  

  Oladejo Eniola•150

  @niol08Posted over 2 years ago

  @DavidMorgade Are there ways to fix it?

  1

  

  David•8,000

  @DavidMorgadePosted over 2 years ago

  @niol08 Hello and sorry for the late response, been off today.

  I have checked a bit your code and I think that the problem might be in your useFetch custom hook here :

  useEffect(() => {
      const interval = setInterval(() => {
        getQuote()
      }, 30000)
      return () => {
        clearInterval(interval)
      }
  

  Try removing the interval, there is no need to set an interval for an API call, you are already using it asynchronously with async await, with that timer you are setting 30 secs for the fetch calls, also in the load of the component because you are even using it in your useEffect

  Hope it helps!

  1

  

  Oladejo Eniola•150

  @niol08Posted about 2 years ago

  @DavidMorgade So... I went back to my code and I figured I didn't call the fetch function on the initial render. The useEffect is to get a new advice from the API every 30secs .I really want to thank you, your feedback were really helpful . Thanks .

  1