From 36e1185fde3d84a6e1140687a37f7a27e542d088 Mon Sep 17 00:00:00 2001
From: renanpvaz <renan.piresvz@gmail.com>
Date: Wed, 11 Oct 2017 13:59:10 -0300
Subject: [PATCH] render simple placeholder while Babel loads

---
 src/components/CodeEditor/CodeEditor.js |  1 -
 src/layouts/index.js                    |  2 --
 src/site-constants.js                   |  2 +-
 src/templates/home.js                   | 25 +++++++++++++++++++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 4733a854..7a932f79 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/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,
diff --git a/src/layouts/index.js b/src/layouts/index.js
index c851e0e5..65d034e0 100644
--- a/src/layouts/index.js
+++ b/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';
diff --git a/src/site-constants.js b/src/site-constants.js
index 81234902..166a01eb 100644
--- a/src/site-constants.js
+++ b/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};
diff --git a/src/templates/home.js b/src/templates/home.js
index fa9588e6..dfc715ec 100644
--- a/src/templates/home.js
+++ b/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';