[gatsby-image] re: fade out base64 on full image load (#7539)

* Make initial state be the same on both client and server

* Fix for browser env without Intersection Observer available

* Simpler implementation

* Typo

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

@@ -10,11 +10,11 @@ exports[`<Img /> should render fixed size images 1`] = `
       alt=""
       class="placeholder"
       src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; color: red;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
       title="Title for the image"
     />
     <div
-      style="width: 100px; opacity: 0; height: 100px;"
+      style="width: 100px; opacity: 1; height: 100px;"
       title="Title for the image"
     />
     <picture>
@@ -29,7 +29,7 @@ exports[`<Img /> should render fixed size images 1`] = `
         alt="Alt text for the image"
         height="100"
         src="test_image.jpg"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
         title="Title for the image"
         width="100"
       />
@@ -54,11 +54,11 @@ exports[`<Img /> should render fluid images 1`] = `
       alt=""
       class="placeholder"
       src="string_of_base64"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; color: red;"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;"
       title="Title for the image"
     />
     <div
-      style="position: absolute; top: 0px; bottom: 0px; opacity: 0; right: 0px; left: 0px;"
+      style="position: absolute; top: 0px; bottom: 0px; opacity: 1; right: 0px; left: 0px;"
       title="Title for the image"
     />
     <picture>
@@ -74,7 +74,7 @@ exports[`<Img /> should render fluid images 1`] = `
       <img
         alt="Alt text for the image"
         src="test_image.jpg"
-        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1;"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
         title="Title for the image"
       />
     </picture>

packages/gatsby-image/src/__tests__/index.js

@@ -67,8 +67,9 @@ describe(`<Img />`, () => {
     expect(placeholderImageTag.getAttribute(`title`)).toEqual(
       `Title for the image`
     )
+    // No Intersection Observer in JSDOM, so placeholder img will be visible (opacity 1) by default
     expect(placeholderImageTag.getAttribute(`style`)).toEqual(
-      `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; color: red;`
+      `position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; color: red;`
     )
     expect(placeholderImageTag.getAttribute(`class`)).toEqual(`placeholder`)
   })

packages/gatsby-image/src/index.js

@@ -127,36 +127,34 @@ class Image extends React.Component {
   constructor(props) {
     super(props)
 
-    // If this browser doesn't support the IntersectionObserver API
-    // we default to start downloading the image right away.
+    // default settings for browser without Intersection Observer available
     let isVisible = true
-    let imgLoaded = true
+    let imgLoaded = false
     let IOSupported = false
     let fadeIn = props.fadeIn
 
     // If this image has already been loaded before then we can assume it's
     // already in the browser cache so it's cheap to just show directly.
     const seenBefore = inImageCache(props)
 
+    // browser with Intersection Observer available
     if (
       !seenBefore &&
       typeof window !== `undefined` &&
       window.IntersectionObserver
     ) {
       isVisible = false
-      imgLoaded = false
       IOSupported = true
     }
 
-    // Always don't render image while server rendering
+    // Never render image during SSR
     if (typeof window === `undefined`) {
       isVisible = false
-      imgLoaded = false
     }
 
+    // Force render for critical images
     if (props.critical) {
       isVisible = true
-      imgLoaded = false
       IOSupported = false
     }