From 6af620c146d380da7e3748bf52ae527c0c167e36 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Tue, 22 Dec 2020 09:03:45 +0000
Subject: [PATCH] fix(gatsby-plugin-image): Preload lazy-hydrator (#28690)

---
 packages/gatsby-plugin-image/gatsby-browser.js        | 11 +++++++++++
 .../src/components/later-hydrator.tsx                 | 10 ++++++++++
 packages/gatsby-plugin-image/src/index.browser.ts     |  1 +
 3 files changed, 22 insertions(+)
 create mode 100644 packages/gatsby-plugin-image/gatsby-browser.js
 create mode 100644 packages/gatsby-plugin-image/src/components/later-hydrator.tsx

diff --git a/packages/gatsby-plugin-image/gatsby-browser.js b/packages/gatsby-plugin-image/gatsby-browser.js
new file mode 100644
index 0000000000000..128583a12d676
--- /dev/null
+++ b/packages/gatsby-plugin-image/gatsby-browser.js
@@ -0,0 +1,11 @@
+const React = require("react")
+
+const { LaterHydrator } = require(".")
+
+exports.wrapRootElement = ({ element }) => {
+  return (
+    <LaterHydrator>
+      {element}
+    </LaterHydrator>
+  )
+}
\ No newline at end of file
diff --git a/packages/gatsby-plugin-image/src/components/later-hydrator.tsx b/packages/gatsby-plugin-image/src/components/later-hydrator.tsx
new file mode 100644
index 0000000000000..cc1c136cabcfa
--- /dev/null
+++ b/packages/gatsby-plugin-image/src/components/later-hydrator.tsx
@@ -0,0 +1,10 @@
+import * as React from "react"
+export function LaterHydrator({
+  children,
+}: React.PropsWithChildren<{}>): React.ReactNode {
+  React.useEffect(() => {
+    import(`./lazy-hydrate`)
+  }, [])
+
+  return children
+}
diff --git a/packages/gatsby-plugin-image/src/index.browser.ts b/packages/gatsby-plugin-image/src/index.browser.ts
index 62267d37606c9..a64d5b9968e8a 100644
--- a/packages/gatsby-plugin-image/src/index.browser.ts
+++ b/packages/gatsby-plugin-image/src/index.browser.ts
@@ -6,6 +6,7 @@ export {
 export { Placeholder } from "./components/placeholder"
 export { MainImage } from "./components/main-image"
 export { StaticImage } from "./components/static-image"
+export { LaterHydrator } from "./components/later-hydrator"
 export { getImage, getSrc, useGatsbyImage } from "./components/hooks"
 export {
   generateImageData,