fix jank on editor load with spinner

components/CodeImage.js

@@ -3,6 +3,7 @@ import React from 'react'
 import domtoimage from 'dom-to-image'
 import CodeMirror from 'react-codemirror'
 import WindowControls from '../components/svg/Controls'
+import Spinner from 'react-spinner'
 
 // hack to only call modes on browser
 if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
@@ -19,40 +20,74 @@ const DEFAULT_SETTINGS = {
   language: 'javascript'
 }
 
-const CodeImage = (props) => {
+ class CodeImage extends React.Component {
-  const config = Object.assign(DEFAULT_SETTINGS, props.config)
 
-  const options = {
+  constructor (props) {
-    lineNumbers: false,
+    super(props)
-    mode: config.language,
+
-    theme: config.theme,
+    this.state = {
-    scrollBarStyle: null,
+      loading: true
-    viewportMargin: Infinity,
+    }
-    lineWrapping: true
   }
 
-  // create styles
+  componentDidMount() {
-  const containerStyle = {
+    this.setState({
-    background: config.background,
+      loading: false
-    padding: `${config.paddingVertical} ${config.paddingHorizontal}`
+    })
   }
 
-  return (
+  render () {
-    <div id="section">
+    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)
-      <div id="container" style={containerStyle}>
+
-        { true ? <WindowControls /> : null }
+    const options = {
-        <CodeMirror className="CodeMirrorContainer" value={props.children} options={options} />
+      lineNumbers: false,
+      mode: config.language,
+      theme: config.theme,
+      scrollBarStyle: null,
+      viewportMargin: Infinity,
+      lineWrapping: true
+    }
+
+    const containerStyle = {
+      background: config.background,
+      padding: `${config.paddingVertical} ${config.paddingHorizontal}`
+    }
+    
+    // set content to spinner if loading, else editor
+    let content = (
+      <div>
+        <Spinner />
+        <style jsx>{`
+          div {
+            width: 680px;
+            height: 500px;
+          }
+        `}
+        </style>
       </div>
-      <style jsx>{`
+    )
-        #section {
+    if (this.state.loading === false) {
-          height: 100%;
+      content = (
-          display: flex;
+        <div id="container" style={containerStyle}>
-          justify-content: center;
+          <CodeMirror className="CodeMirrorContainer" value={this.props.children} options={options} />
-          align-items: center;
+        </div>
-        }
+      )
-      `}</style>
+    }
-    </div>
+
-  )
+    return (
+      <div id="section">
+        { content }
+        <style jsx>{`
+          #section {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        `}</style>
+      </div>
+    )
+  }
 }
 
 export default CodeImage

components/Meta.js

@@ -9,6 +9,7 @@ export default () => (
       <meta charSet="utf-8" />
       <link rel="shortcut icon" href="/static/favicon.ico" />
       <link rel="stylesheet" href="//cdn.jsdelivr.net/font-hack/2.020/css/hack-extended.min.css" />
+      <link rel="stylesheet" type="text/css" href="/static/react-spinner.css" />
     </Head>
     <style jsx global>{`
       body {

package.json

@@ -19,12 +19,14 @@
     "morgan": "^1.8.2",
     "next": "^2.4.3",
     "react": "^15.5.4",
-    "react-codemirror": "^1.0.0",
     "react-click-outside": "^2.3.1",
+    "react-codemirror": "^1.0.0",
     "react-color": "^2.12.1",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "^15.5.4",
+    "react-spinkit": "^3.0.0",
+    "react-spinner": "^0.2.7",
     "react-syntax-highlight": "^0.0.6"
   }
 }

static/react-spinner.css

@@ -0,0 +1,35 @@
+.react-spinner {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  top: 50%;
+  left: 50%;
+}
+
+.react-spinner_bar {
+  -webkit-animation: react-spinner_spin 1.2s linear infinite;
+  -moz-animation: react-spinner_spin 1.2s linear infinite;
+  animation: react-spinner_spin 1.2s linear infinite;
+  border-radius: 5px;
+  background-color: white;
+  position: absolute;
+  width: 20%;
+  height: 7.8%;
+  top: -3.9%;
+  left: -10%;
+}
+
+@keyframes react-spinner_spin {
+ 0% { opacity: 1; }
+ 100% { opacity: 0.15; }
+}
+
+@-moz-keyframes react-spinner_spin {
+ 0% { opacity: 1; }
+ 100% { opacity: 0.15; }
+}
+
+@-webkit-keyframes react-spinner_spin {
+ 0% { opacity: 1; }
+ 100% { opacity: 0.15; }
+}

yarn.lock

@@ -1036,7 +1036,7 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   dependencies:
     inherits "^2.0.1"
 
-classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -2114,6 +2114,10 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+loaders.css@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/loaders.css/-/loaders.css-0.1.2.tgz#3a9fb43726c73334a38142af9d0629019b658743"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -2216,14 +2220,10 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.7:
   dependencies:
     mime-db "~1.27.0"
 
-mime@1.3.4:
+mime@1.3.4, mime@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
-mime@^1.3.4:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
-
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -2845,6 +2845,19 @@ react-proxy@^3.0.0-alpha.0:
   dependencies:
     lodash "^4.6.1"
 
+react-spinkit@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-spinkit/-/react-spinkit-3.0.0.tgz#31fdaf4e18177766c57d1b1f3330290f8492a85a"
+  dependencies:
+    classnames "^2.2.3"
+    loaders.css "^0.1.2"
+    object-assign "^4.1.0"
+    prop-types "^15.5.8"
+
+react-spinner@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/react-spinner/-/react-spinner-0.2.7.tgz#ea3ca3375dd7a54edbb5cc01d17496a2e2fc14db"
+
 react-syntax-highlight@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/react-syntax-highlight/-/react-syntax-highlight-0.0.6.tgz#2a657a9a693ffd16a22181ad08de96902957f87a"