fix(gatsby-plugin-image): Preload lazy-hydrator (#28690)

Author: ascorbic

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>
+  )
+}

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
+}

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,