How disable gatsby-portal on a Gatsby project? #29061

ghost · 2021-01-17T20:22:13Z

ghost
Jan 17, 2021

There's this element that is inserted in the <body> tag: <gatsby-portal></gatsby-portal>, it stays in the bottom left corner. An image:

It seems to be added in the code from .cache/loading-indicator/, in the props {props.postBodyComponents} in .cache/default-html.js.

In the file .cache/loading-indicator/indicator.js there's this code:

  if (!window.___gatsbyDidShowLoadingIndicatorBefore) {
    // not ideal to this in render function, but that's just console info
    debugLog(
      `A loading indicator is displayed in-browser whenever content is being requested upon navigation (Query On Demand).\n\nYou can disable the loading indicator for your current session by visiting ${window.location.origin}/___loading-indicator/disable`
    )
    window.___gatsbyDidShowLoadingIndicatorBefore = true
  }

Visiting ${window.location.origin}/___loading-indicator/disable works as expected, but this the log is never displayed neither in build nor development process from the terminal or console of the browser. Maybe it is a bug in gatsby ^2.31.0-next.1?

Either way, building the project for production includes this portal code, which I don't use nor intend to use in the future for this particular project. I'm aware that you can mess around with gatsby-ssr.js and default-html.js, but I think it is for build process, right? Because I couldn't remove it in development mode.

The project uses npm init gatsby with default options, i.e. no additional packages, the dependencies listed in the end of this question were added after, the portal was already there.

I found this plugin: gatsby-plugin-portal, but it doesn't seem to be the same thing.

I'm using gatsby@next because of gatsby-plugin-image-beta: #27950

Dependencies (there is no devDependencies in package.json):

{
  "dependencies": {
    "gatsby": "^2.31.0-next.1",
    "gatsby-plugin-image": "^0.6.0-next.1",
    "gatsby-plugin-manifest": "^2.10.0",
    "gatsby-plugin-postcss": "^3.5.0",
    "gatsby-plugin-preact": "^4.5.0",
    "gatsby-plugin-react-helmet": "^3.8.0",
    "gatsby-plugin-sharp": "^2.13.0-next.1",
    "gatsby-plugin-sitemap": "^2.10.0",
    "gatsby-transformer-sharp": "^2.11.0-next.1",
    "postcss": "^8.2.4",
    "preact": "^10.5.10",
    "preact-render-to-string": "^5.1.12",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0"
  }
}

Answered by ghost

Jan 19, 2021

The loading indicator doesn't dismiss automatically on develop for me, so I put GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR=false in develop script. Now I don't have to go to http://localhost:8000/___loading-indicator/disable to disable it every time.

View full answer

LekoArts · 2021-01-18T10:15:33Z

LekoArts
Jan 18, 2021

Hi! Are you sure it's on your live website?
https://gatsbyconf.com/ is built with the same stack (almost) and doesn't have that. Also, the codepath that is adding this behavior is only for development.

0 replies

ghost · 2021-01-19T18:59:39Z

ghost
Jan 19, 2021

The loading indicator doesn't dismiss automatically on develop for me, so I put GATSBY_QUERY_ON_DEMAND_LOADING_INDICATOR=false in develop script. Now I don't have to go to http://localhost:8000/___loading-indicator/disable to disable it every time.

1 reply

kfrost89 Jan 24, 2021

I am having the same issue. For me, it began when I started using gatsby-plugin-preact.

devhaeyeon · 2021-01-28T21:26:45Z

devhaeyeon
Jan 28, 2021

@RickStanley

Hello?
I used to worry about the same issues as you.

I wanted to solve the red text on the console window.

Also, as you want, I don't want to go to http://localhost:8000/___ loading-indicator/disable to disable each time either.

It didn't even appear in Google's search results.

I happened to see it in the terminal running it and found the following phrase.

There are 5 other flags available that you might be interested in:
- FAST_DEV : Enable all experiments aimed at improving develop server start time
- DEV_SSR : (Umbrella Issue (https://gatsby.dev/dev-ssr-feedback)) · Server Side Render (SSR) pages on full reloads during develop. Helps you detect SSR bugs and fix them without needing to do full builds.
- PRESERVE_WEBPACK_CACHE : (Umbrella Issue (https://gatsby.dev/cache-clearing-feedback)) · Don't delete webpack's cache when changing
gatsby-node.js & gatsby-config.js files.
- PRESERVE_FILE_DOWNLOAD_CACHE : (Umbrella Issue (https://gatsby.dev/cache-clearing-feedback)) · Don't delete the downloaded files cache when
 changing gatsby-node.js & gatsby-config.js files.
- FAST_REFRESH : (Umbrella Issue (https://gatsby.dev/fast-refresh-feedback)) · Use React Fast Refresh instead of the legacy react-hot-loader
for instantaneous feedback in your development server. Recommended for versions of React >= 17.0.
- PARALLEL_SOURCING : EXPERIMENTAL · (Umbrella Issue (https://gatsby.dev/parallel-sourcing-feedback)) · Run all source plugins at the same
time instead of serially. For sites with multiple source plugins, this can speedup sourcing and transforming considerably.

So I edited gatsby-config.js file.
I added this flags because it didn't exist.
gatsby-config.js

  flags: { 
    DEV_SSR: false,
  },

then gatsby develop in terminal. (Restart)

I haven't deployed and confirmed it yet, but I wanted to solve it on the development server.
I hope this solution helps.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How disable gatsby-portal on a Gatsby project? #29061

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How disable gatsby-portal on a Gatsby project? #29061

Uh oh!

ghost Jan 17, 2021

Replies: 3 comments · 1 reply

Uh oh!

LekoArts Jan 18, 2021

Uh oh!

ghost Jan 19, 2021

Uh oh!

kfrost89 Jan 24, 2021

Uh oh!

devhaeyeon Jan 28, 2021

ghost
Jan 17, 2021

Replies: 3 comments 1 reply

LekoArts
Jan 18, 2021

ghost
Jan 19, 2021

devhaeyeon
Jan 28, 2021