Title isn't rendered when a page is opened in a new tab

[vtenfys]

Description

When opening a page in a background tab (using control-click or right-click "Open link in new tab"), the title isn't displayed until switching to the tab.

In most cases this isn't an issue since the title is rendered at server-side. However, when using an offline shell with a service worker, or in other cases where the title isn't specified in the HTML source (i.e. without server-side rendering), the issue becomes apparent since the incorrect title can be seen in the tab.

This appears to be due to HelmetUtils.js using requestAnimationFrame which is blocked by Chrome while tabs are in the background - not sure if the problem also occurs on Firefox.

Steps to reproduce

1. Create a multli-page React project using Helmet, without server-side rendering
2. Open a link in the background e.g. using "Open link in new tab"

Expected behaviour

The title is immediately visible after opening the tab.

Actual behaviour

The title is not visible in the tab, and instead, the page's path can be seen.

Related: gatsbyjs/gatsby#8089

[AubreyHewes]

@davidbailey00 Yeah nice problem. A workaround I have used to alleviate this problem is to set the document.title on component mount/props-update as the same as the helmet title which would be set in the component render..

[beaugunderson]

answered in #314 / #315