Defer babel loading

src/components/CodeEditor/CodeEditor.js

@@ -130,7 +130,6 @@ class CodeEditor extends Component {
                   [media.lessThan('medium')]: {
                     marginBottom: '0 !important',
                   },
-
 
                   '& pre.prism-code[contenteditable]': {
                     outline: 0,

src/html.js

@@ -19,7 +19,6 @@ if (process.env.NODE_ENV === `production`) {
 
 const JS_NPM_URLS = [
   '//unpkg.com/[email protected]/dist/cdn/docsearch.min.js',
-  '//unpkg.com/[email protected]/babel.min.js',
 ];
 
 export default class HTML extends Component {

src/site-constants.js

@@ -11,5 +11,6 @@
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
 const version = '16.0.0';
+const babelURL = '//unpkg.com/[email protected]/babel.min.js';
 
-export {urlRoot, version};
+export {urlRoot, version, babelURL};

src/templates/home.js

@@ -15,13 +15,23 @@ import React, {Component} from 'react';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
 import {colors, media, sharedStyles} from 'theme';
 import createOgUrl from 'utils/createOgUrl';
+import loadScript from 'utils/loadScript';
+import {babelURL} from 'site-constants';
+import ReactDOM from 'react-dom';
 
 class Home extends Component {
   componentDidMount() {
-    mountCodeExample('helloExample', HELLO_COMPONENT);
-    mountCodeExample('timerExample', TIMER_COMPONENT);
-    mountCodeExample('todoExample', TODO_COMPONENT);
-    mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
+    renderExamplePlaceholder('helloExample');
+    renderExamplePlaceholder('timerExample');
+    renderExamplePlaceholder('todoExample');
+    renderExamplePlaceholder('markdownExample');
+
+    loadScript(babelURL).then(() => {
+      mountCodeExample('helloExample', HELLO_COMPONENT);
+      mountCodeExample('timerExample', TIMER_COMPONENT);
+      mountCodeExample('todoExample', TODO_COMPONENT);
+      mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
+    });
   }
 
   render() {
@@ -163,6 +173,16 @@ Home.propTypes = {
   location: PropTypes.object.isRequired,
 };
 
+// TODO Improve this temporarily placeholder as part of
+// converting the home page from markdown template to a Gatsby
+// page (see issue #2)
+function renderExamplePlaceholder(containerId) {
+  ReactDOM.render(
+    <h4>Loading code example...</h4>,
+    document.getElementById(containerId),
+  );
+}
+
 const CtaItem = ({children, primary = false}) => (
   <div
     css={{

src/utils/loadScript.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+export default url =>
+  new Promise((resolve, reject) =>
+    document.head.appendChild(
+      Object.assign(document.createElement('script'), {
+        async: true,
+        src: url,
+        onload: resolve,
+        onerror: reject,
+      }),
+    ),
+  );