render simple placeholder while Babel loads

Author: renanpvaz

src/components/CodeEditor/CodeEditor.js

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

src/layouts/index.js

@@ -19,8 +19,6 @@ import Flex from 'components/Flex';
 import Footer from 'components/LayoutFooter';
 import Header from 'components/LayoutHeader';
 import {media} from 'theme';
-import loadScript from 'utils/loadScript';
-import {algoliaURL} from 'site-constants';
 
 // Import global styles
 import '../prism-styles';

src/site-constants.js

@@ -16,4 +16,4 @@ const urlRoot = 'https://reactjs.org';
 const version = '16.0.0';
 const babelURL = '//unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
-export {urlRoot, version, babelURL,};
+export {urlRoot, version, babelURL};

src/templates/home.js

@@ -20,9 +20,15 @@ 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() {
+    this.renderExamplePlaceholder('helloExample');
+    this.renderExamplePlaceholder('timerExample');
+    this.renderExamplePlaceholder('todoExample');
+    this.renderExamplePlaceholder('markdownExample');
+
     loadScript(babelURL).then(() => {
       mountCodeExample('helloExample', HELLO_COMPONENT);
       mountCodeExample('timerExample', TIMER_COMPONENT);
@@ -31,6 +37,25 @@ class Home extends Component {
     });
   }
 
+  renderExamplePlaceholder(containerId) {
+    ReactDOM.render(
+      <strong
+        css={{
+          transform: 'translate(65%, -5em)',
+          display: 'block',
+
+          [media.lessThan('xlarge')]: {
+            transform: 'none',
+            marginTop: 15,
+            textAlign: 'center',
+          },
+        }}>
+        Loading code example...
+      </strong>,
+      document.getElementById(containerId),
+    );
+  }
+
   render() {
     const {data} = this.props;
     const title = 'React - A JavaScript library for building user interfaces';