diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
index 0927b5999202f..d5a7416608ad6 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 syncRequires from "$virtual/sync-requires"
// Generated during bootstrap
import matchPaths from "$virtual/match-paths.json"
+import { LoadingIndicatorEventHandler } from "./loading-indicator"
if (process.env.GATSBY_HOT_LOADER === `fast-refresh` && module.hot) {
module.hot.accept(`$virtual/sync-requires`, () => {
@@ -164,6 +165,23 @@ apiRunnerAsync(`onClientEntry`).then(() => {
renderer(, 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(
+ ,
+ indicatorMountElement
+ )
+ }
})
})
})
diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js
index 1a62430b4ce08..f26176f34d4e2 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 { reportError, clearError } from "./error-overlay-handler"
import { LoadingIndicatorEventHandler } from "./loading-indicator"
@@ -148,9 +147,5 @@ const ConditionalFastRefreshOverlay = ({ children }) => {
export default () => (
{WrappedRoot}
- {process.env.GATSBY_EXPERIMENTAL_QUERY_ON_DEMAND &&
- process.env.GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR === `true` && (
-
- )}
)