Blue flash when GIF is loading

[bobbysebolao]

There is a brief blue flash that occurs when you eat food and a new GIF loads (I don't think it shows in the GIF below though :( ):

It looks like there is a brief moment when the backgroundUrl of the game-area div is set to nothing before the new one loads. One way to stop the flash from happening is to set the GIF as the src on an <img /> tag inside the if (gameplay) { ... block starting on line 136 of App.js:

  if (gamePlay) {
    return (
      <div
        className="game-area"
      >
        <img 
        src={
          `https://media.giphy.com/media/${
            backgroundURL ? backgroundURL : initialState.id
          }/giphy.gif`
        }
        alt="alt-text-goes-here"
        />

...
...
...

}

Just doing the above seemed to fix issue locally for me 💥. Apparently the so-called 'Flash Of Unstyled Content' (or FOUC) is a common problem in React apps. Here's a thread on how to handle it in other situations, like when there are slow loading images on page load