Fix(gatsby-plugin-image): Render LayoutWrapper prior to loading of lazy-hydrate (#28841) (#28990)

* add layoutwrapper to intial render when lazy-hydrate hasn't yet run

* calculate sizer string

(cherry picked from commit 78e5e47)

Co-authored-by: LB <[email protected]>

Author: GatsbyJS Bot

packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx

@@ -17,6 +17,7 @@ import {
 import { PlaceholderProps } from "./placeholder"
 import { MainImageProps } from "./main-image"
 import { Layout } from "../image-utils"
+import { getSizer } from "./layout-wrapper"
 
 // eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface GatsbyImageProps
@@ -193,6 +194,8 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     props,
   ])
 
+  const sizer = getSizer(layout, width, height)
+
   return (
     <Type
       {...wrapperProps}
@@ -203,7 +206,9 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
       }}
       className={`${wClass}${className ? ` ${className}` : ``}`}
       ref={root}
-      dangerouslySetInnerHTML={{ __html: `` }}
+      dangerouslySetInnerHTML={{
+        __html: sizer,
+      }}
       suppressHydrationWarning
     />
   )

packages/gatsby-plugin-image/src/components/layout-wrapper.tsx

@@ -39,6 +39,23 @@ if (hasNativeLazyLoadSupport) {
   />
 )
 
+export function getSizer(
+  layout: Layout,
+  width: number,
+  height: number
+): string {
+  let sizer: string | null = null
+  if (layout === `fluid`) {
+    sizer = `<div aria-hidden="true" style="padding-top: ${
+      (height / width) * 100
+    }%;"></div>`
+  }
+  if (layout === `constrained`) {
+    sizer = `<div style="max-width: ${width}px; display: block;"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='${height}' width='${width}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width: 100%; display: block; position: static;"></div>`
+  }
+  return sizer
+}
+
 export const LayoutWrapper: FunctionComponent<ILayoutWrapperProps> = function LayoutWrapper({
   layout,
   width,
@@ -68,7 +85,6 @@ export const LayoutWrapper: FunctionComponent<ILayoutWrapperProps> = function La
       </div>
     )
   }
-
   return (
     <Fragment>
       {sizer}