From 83002365c4b9e7efdb69c354eee6894cbde975e4 Mon Sep 17 00:00:00 2001
From: Matt Kane <matt@gatsbyjs.com>
Date: Thu, 17 Dec 2020 11:54:37 +0000
Subject: [PATCH] perf(gatsby-plugin-image): Handle disabled js, and add
 preload link (#28669)

* perf(gatsby-plugin-image): Handle disabled js, and add preload link

* Update packages/gatsby-plugin-image/src/components/main-image.tsx

Co-authored-by: Ward Peeters <ward@coding-tech.com>

Co-authored-by: Ward Peeters <ward@coding-tech.com>
---
 .../src/components/main-image.tsx             | 21 ++++++++++++++++++-
 .../gatsby-plugin-image/src/gatsby-ssr.tsx    |  8 +++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/gatsby-plugin-image/src/components/main-image.tsx b/packages/gatsby-plugin-image/src/components/main-image.tsx
index 716c8dfa54707..cc6037b4b7a6e 100644
--- a/packages/gatsby-plugin-image/src/components/main-image.tsx
+++ b/packages/gatsby-plugin-image/src/components/main-image.tsx
@@ -5,7 +5,26 @@ export type MainImageProps = PictureProps
 
 export const MainImage = forwardRef<HTMLImageElement, MainImageProps>(
   function MainImage({ ...props }, ref) {
-    return <Picture ref={ref} {...props} />
+    return (
+      <>
+        {props.loading === `eager` && (
+          <link
+            rel="preload"
+            as="image"
+            href={props.fallback.src}
+            // TODO: remove this if imagesrcset is added to the types
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            imagesrcset={props.fallback.srcSet}
+            imagesizes={props.fallback.sizes}
+          />
+        )}
+        <Picture ref={ref} {...props} />
+        <noscript>
+          <Picture {...props} shouldLoad={true} />
+        </noscript>
+      </>
+    )
   }
 )
 
diff --git a/packages/gatsby-plugin-image/src/gatsby-ssr.tsx b/packages/gatsby-plugin-image/src/gatsby-ssr.tsx
index a659ce20df3f5..9963c90b3e8fd 100644
--- a/packages/gatsby-plugin-image/src/gatsby-ssr.tsx
+++ b/packages/gatsby-plugin-image/src/gatsby-ssr.tsx
@@ -44,9 +44,13 @@ export function onRenderBody({ setHeadComponents }: RenderBodyArgs): void {
       dangerouslySetInnerHTML={generateHtml(
         `<style>` +
           cssNanoMacro`
-  .gatsby-image-wrapper [data-main-image] {
+  .gatsby-image-wrapper noscript [data-main-image] {
     opacity: 1 !important;
-  }` +
+  }
+  .gatsby-image-wrapper [data-placeholder-image] {
+    opacity: 0 !important;
+  }
+  ` +
           `</style>`
       )}
     />,