From d3dd3e15e27ea040d764a81c6f77f15c281f2499 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Tue, 23 Feb 2021 14:26:52 -0800
Subject: [PATCH] fix(gatsby): render QoD overlay in its own root element to
 avoid hydration issues (#29692)

* fix(gatsby): render QoD overlay in its own root element to avoid hydration issues

* Update packages/gatsby/cache-dir/app.js

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

* Update packages/gatsby/cache-dir/app.js

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

* Fix linting

Co-authored-by: Ward Peeters <ward@coding-tech.com>
---
 packages/gatsby/cache-dir/app.js  | 18 ++++++++++++++++++
 packages/gatsby/cache-dir/root.js |  5 -----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
index 97025aac14ff7..3676dd72be5e0 100644
--- a/packages/gatsby/cache-dir/app.js
+++ b/packages/gatsby/cache-dir/app.js
@@ -12,6 +12,7 @@ import DevLoader from "./dev-loader"
 import asyncRequires from "$virtual/async-requires"
 // Generated during bootstrap
 import matchPaths from "$virtual/match-paths.json"
+import { LoadingIndicatorEventHandler } from "./loading-indicator"
 
 // ensure in develop we have at least some .css (even if it's empty).
 // this is so there is no warning about not matching content-type when site doesn't include any regular css (for example when css-in-js is used)
@@ -168,6 +169,23 @@ apiRunnerAsync(`onClientEntry`).then(() => {
 
       renderer(<Root />, rootElement, () => {
         apiRunner(`onInitialClientRender`)
+
+        // Render query on demand overlay
+        if (
+          process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR &&
+          process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true`
+        ) {
+          const indicatorMountElement = document.createElement(`div`)
+          indicatorMountElement.setAttribute(
+            `id`,
+            `query-on-demand-indicator-element`
+          )
+          document.body.append(indicatorMountElement)
+          ReactDOM.render(
+            <LoadingIndicatorEventHandler />,
+            indicatorMountElement
+          )
+        }
       })
     })
   })
diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js
index 1e3fb8c2674fe..95e541de4084b 100644
--- a/packages/gatsby/cache-dir/root.js
+++ b/packages/gatsby/cache-dir/root.js
@@ -12,7 +12,6 @@ import loader from "./loader"
 import { PageQueryStore, StaticQueryStore } from "./query-result-store"
 import EnsureResources from "./ensure-resources"
 import FastRefreshOverlay from "./fast-refresh-overlay"
-import { LoadingIndicatorEventHandler } from "./loading-indicator"
 
 navigationInit()
 
@@ -116,9 +115,5 @@ const WrappedRoot = apiRunner(
 export default () => (
   <FastRefreshOverlay>
     <StaticQueryStore>{WrappedRoot}</StaticQueryStore>
-    {process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND &&
-      process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true` && (
-        <LoadingIndicatorEventHandler />
-      )}
   </FastRefreshOverlay>
 )