[gatsby-image] Placeholder doesn't disappear/unblur on initial page load

[glennreyes]

Description

The placeholder image using gatsby-image doesn't "unblur"/disappear on initial page load.

Steps to reproduce

Open: https://5d5ba4d4bda8be0008892f24--glennreyes.netlify.com/

Expected result

Placeholder disappears/unblurs after the image has loaded.

It worked before with gatsby-image 2.2.8 before bumping to gatsby-image 2.2.9:
https://5d5b404d7c871a00087b3fe1--glennreyes.netlify.com

Until now, every version > 2.2.8 remain with the same bug.

Also, switching route and going back to the page, unblurs image as usual. It happens only in production and not in development mode.

Actual result

The placeholder image using gatsby-image doesn't "unblur"/disappear on initial page load.

Misc

gatsby-image 2.2.8:

• Source: https://github.com/glennreyes/glennreyes.com/tree/71157546cfca63c66ce43f8842a7fe3af758b75c
• Deploy preview: https://5d5ba4d4bda8be0008892f24--glennreyes.netlify.com/

gatsby-image 2.2.9:

• Source: https://github.com/glennreyes/glennreyes.com/tree/e8585828876781ccf0b51fa6a36b206e3f066404
• Deploy preview https://5d5b404d7c871a00087b3fe1--glennreyes.netlify.com

Currently, all deployed versions after gatsby 2.13.68 remain with the same bug.

Environment

Bug with:

  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.9.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    gatsby: 2.13.69 => 2.13.68 
    gatsby-image: 2.2.9 => 2.2.8 
    gatsby-plugin-canonical-urls: 2.1.3 => 2.1.3 
    gatsby-plugin-eslint: 2.0.5 => 2.0.5 
    gatsby-plugin-google-analytics: 2.1.7 => 2.1.7 
    gatsby-plugin-manifest: 2.2.5 => 2.2.5 
    gatsby-plugin-mdx: 1.0.24 => 1.0.24 
    gatsby-plugin-netlify: 2.1.5 => 2.1.5 
    gatsby-plugin-react-helmet: 3.1.3 => 3.1.3 
    gatsby-plugin-robots-txt: 1.5.0 => 1.5.0 
    gatsby-plugin-sharp: 2.2.12 => 2.2.12 
    gatsby-plugin-sitemap: 2.2.6 => 2.2.6 
    gatsby-plugin-styled-components: 3.1.2 => 3.1.2 
    gatsby-plugin-svgr: 2.0.2 => 2.0.2 
    gatsby-plugin-typescript: 2.1.2 => 2.1.2 
    gatsby-remark-copy-linked-files: 2.1.6 => 2.1.6 
    gatsby-remark-images: 3.1.12 => 3.1.12 
    gatsby-remark-responsive-iframe: 2.2.4 => 2.2.4 
    gatsby-remark-smartypants: 2.1.2 => 2.1.2 
    gatsby-source-filesystem: 2.1.9 => 2.1.9 
    gatsby-transformer-remark: 2.6.14 => 2.6.14 
    gatsby-transformer-sharp: 2.2.6 => 2.2.6 

No bug with:

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.9.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    gatsby: 2.13.68 => 2.13.68
    gatsby-image: 2.2.8 => 2.2.8
    gatsby-plugin-canonical-urls: 2.1.3 => 2.1.3
    gatsby-plugin-eslint: 2.0.5 => 2.0.5
    gatsby-plugin-google-analytics: 2.1.7 => 2.1.7
    gatsby-plugin-manifest: 2.2.5 => 2.2.5
    gatsby-plugin-mdx: 1.0.24 => 1.0.24
    gatsby-plugin-netlify: 2.1.5 => 2.1.5
    gatsby-plugin-react-helmet: 3.1.3 => 3.1.3
    gatsby-plugin-robots-txt: 1.5.0 => 1.5.0
    gatsby-plugin-sharp: 2.2.12 => 2.2.12
    gatsby-plugin-sitemap: 2.2.6 => 2.2.6
    gatsby-plugin-styled-components: 3.1.2 => 3.1.2
    gatsby-plugin-svgr: 2.0.2 => 2.0.2
    gatsby-plugin-typescript: 2.1.2 => 2.1.2
    gatsby-remark-copy-linked-files: 2.1.6 => 2.1.6
    gatsby-remark-images: 3.1.12 => 3.1.12
    gatsby-remark-responsive-iframe: 2.2.4 => 2.2.4
    gatsby-remark-smartypants: 2.1.2 => 2.1.2
    gatsby-source-filesystem: 2.1.9 => 2.1.9
    gatsby-transformer-remark: 2.6.14 => 2.6.14
    gatsby-transformer-sharp: 2.2.6 => 2.2.6

[wardpeet]

Published in gatsby-image@2.2.15