fix(docs): fix re-rendering github star button in docs header (#1870)

website/gatsby-config.js

@@ -38,8 +38,6 @@ module.exports = {
         name: 'content',
       },
     },
-    'gatsby-transformer-yaml',
-    'gatsby-transformer-json',
     {
       resolve: 'gatsby-source-filesystem',
       options: {
@@ -62,6 +60,8 @@ module.exports = {
         ]
       },
     },
+    'gatsby-transformer-yaml',
+    'gatsby-transformer-json',
     'gatsby-plugin-postcss',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-catch-links',

website/src/components/github-button.js

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+
+class GitHubStarButton extends PureComponent {
+  async componentDidMount() {
+    const gitHubButtonModule = await import('github-buttons/dist/react');
+
+    this.GitHubButton = gitHubButtonModule.default;
+
+    this.forceUpdate();
+  }
+
+  render() {
+    const GitHubButton = this.GitHubButton;
+
+    if (!GitHubButton) {
+      return null;
+    }
+
+    return (
+      <GitHubButton
+        href="https://github.com/netlify/netlify-cms"
+        data-icon="octicon-star"
+        data-show-count="true"
+        aria-label="Star netlify/netlify-cms on GitHub"
+      >
+        Star
+      </GitHubButton>
+    );
+  }
+}
+
+export default GitHubStarButton;

website/src/components/header.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { Location } from '@reach/router';
 
 import DocSearch from './docsearch';
+import GitHubButton from './github-button';
 
 import logo from '../img/netlify-cms-logo.svg';
 
@@ -17,9 +18,6 @@ class Header extends Component {
   async componentDidMount() {
     // TODO: use raf to throttle events
     window.addEventListener('scroll', this.handleScroll);
-    const gitHubButtonModule = await import('github-buttons/dist/react');
-    this.GitHubButton = gitHubButtonModule.default;
-    this.forceUpdate();
   }
 
   componentWillUnmount() {
@@ -38,7 +36,6 @@ class Header extends Component {
 
   render() {
     const { scrolled } = this.state;
-    const GitHubButton = this.GitHubButton;
 
     return (
       <Location>
@@ -76,16 +73,7 @@ class Header extends Component {
                     Blog
                   </Link>
                   <span className="gh-button">
-                    {GitHubButton && (
-                      <GitHubButton
-                        href="https://github.com/netlify/netlify-cms"
-                        data-icon="octicon-star"
-                        data-show-count="true"
-                        aria-label="Star netlify/netlify-cms on GitHub"
-                      >
-                        Star
-                      </GitHubButton>
-                    )}
+                    <GitHubButton />
                   </span>
                 </div>
               </div>