From 203220e12be488b068106d75b0485e8d4a95a145 Mon Sep 17 00:00:00 2001
From: Kyle Mathews <mathews.kyle@gmail.com>
Date: Wed, 24 Feb 2021 14:31:44 -0800
Subject: [PATCH] fix(gatsby): render QoD overlay in its own root element to
 avoid hydration issues

---
 packages/gatsby/cache-dir/app.js  | 15 +++++++++++++++
 packages/gatsby/cache-dir/root.js |  5 -----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
index 0927b5999202f..c499156f3c2c9 100644
--- a/packages/gatsby/cache-dir/app.js
+++ b/packages/gatsby/cache-dir/app.js
@@ -8,6 +8,7 @@ import emitter from "./emitter"
 import { apiRunner, apiRunnerAsync } from "./api-runner-browser"
 import { setLoader, publicLoader } from "./loader"
 import { Indicator } from "./loading-indicator/indicator"
+import { LoadingIndicatorEventHandler } from "./loading-indicator"
 import DevLoader from "./dev-loader"
 import syncRequires from "$virtual/sync-requires"
 // Generated during bootstrap
@@ -164,6 +165,20 @@ apiRunnerAsync(`onClientEntry`).then(() => {
 
       renderer(<Root />, rootElement, () => {
         apiRunner(`onInitialClientRender`)
+
+        // Render query on demand overlay
+        if (process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR) {
+          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 1a62430b4ce08..4bf7b8fa0dc85 100644
--- a/packages/gatsby/cache-dir/root.js
+++ b/packages/gatsby/cache-dir/root.js
@@ -14,7 +14,6 @@ import EnsureResources from "./ensure-resources"
 import FastRefreshOverlay from "./fast-refresh-overlay"
 
 import { reportError, clearError } from "./error-overlay-handler"
-import { LoadingIndicatorEventHandler } from "./loading-indicator"
 
 // TODO: Remove entire block when we make fast-refresh the default
 // In fast-refresh, this logic is all moved into the `error-overlay-handler`
@@ -148,9 +147,5 @@ const ConditionalFastRefreshOverlay = ({ children }) => {
 export default () => (
   <ConditionalFastRefreshOverlay>
     <StaticQueryStore>{WrappedRoot}</StaticQueryStore>
-    {process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND &&
-      process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true` && (
-        <LoadingIndicatorEventHandler />
-      )}
   </ConditionalFastRefreshOverlay>
 )