update spinner for react-codemirror2 (#470)

components/Carbon.js

@@ -3,10 +3,11 @@ import * as hljs from 'highlight.js'
 import ResizeObserver from 'resize-observer-polyfill'
 import debounce from 'lodash.debounce'
 import ms from 'ms'
+import {Controlled as CodeMirror} from 'react-codemirror2'
+import Spinner from 'react-spinner'
 
 import WindowControls from '../components/WindowControls'
 import Watermark from '../components/svg/Watermark'
-import CodeMirror from '../lib/react-codemirror'
 import { COLORS, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_SETTINGS } from '../lib/constants'
 
 const handleLanguageChange = (newCode, props) => {
@@ -28,6 +29,7 @@ class Carbon extends PureComponent {
     super(props)
 
     this.state = {
+      loading: true,
       language: props.config.language
     }
 
@@ -38,6 +40,7 @@ class Carbon extends PureComponent {
   }
 
   componentDidMount() {
+    this.setState({ loading: false })
     this.setState(handleLanguageChange(this.props.children, this.props))
 
     const ro = new ResizeObserver(entries => {
@@ -87,7 +90,21 @@ class Carbon extends PureComponent {
       (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
       this.props.config.backgroundImage
 
-    const content = (
+    let content = (
+      <div>
+        <Spinner />
+        <style jsx>
+          {`
+            div {
+              height: 352px;
+            }
+          `}
+        </style>
+      </div>
+    )
+
+    if (this.state.loading === false) {
+      content = (
         <div id="container">
           {config.windowControls ? (
             <WindowControls
@@ -226,6 +243,7 @@ class Carbon extends PureComponent {
           </style>
         </div>
       )
+    }
 
     return (
       <div id="section">

components/Editor.js

@@ -4,7 +4,6 @@ import HTML5Backend from 'react-dnd-html5-backend'
 import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
 import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
-import Spinner from 'react-spinner'
 
 // Ours
 import Button from './Button'
@@ -44,7 +43,6 @@ class Editor extends React.Component {
     super(props)
     this.state = {
       ...DEFAULT_SETTINGS,
-      loading: true,
       uploading: false,
       code: props.content,
       online: true
@@ -72,7 +70,6 @@ class Editor extends React.Component {
     this.setState({
       ...getState(localStorage),
       ...this.props.initialState,
-      loading: false,
       online: Boolean(window && window.navigator && window.navigator.onLine)
     })
 
@@ -216,9 +213,6 @@ class Editor extends React.Component {
   }
 
   render() {
-    if (this.state.loading) {
-      return <Spinner />
-    }
     return (
       <React.Fragment>
         <div id="editor">

lib/react-codemirror.js

@@ -1,6 +0,0 @@
-// For SSR, CodeMirror will throw an error, so return a div instead
-let CodeMirror = 'div'
-if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
-  CodeMirror = require('react-codemirror2').Controlled
-}
-export default CodeMirror

package.json

@@ -42,7 +42,7 @@
     "puppeteer": "1.7.0",
     "react": "16.3.*",
     "react-click-outside": "^3.0.0",
-    "react-codemirror2": "^5.0.0",
+    "react-codemirror2": "^5.1.0",
     "react-color": "^2.13.8",
     "react-dnd": "^5.0.0",
     "react-dnd-html5-backend": "^5.0.0",

static/react-spinner.css

@@ -1 +1 @@
-.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:#fff;position:absolute;width:20%;height:7.8%;top:-3.9%;left:-10%}@keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-moz-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-webkit-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}
+.react-spinner{z-index: 999;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:#fff;position:absolute;width:20%;height:7.8%;top:-3.9%;left:-10%}@keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-moz-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-webkit-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}

yarn.lock

@@ -5765,7 +5765,7 @@ react-click-outside@^3.0.0:
   dependencies:
     hoist-non-react-statics "^2.1.1"
 
-react-codemirror2@^5.0.0:
+react-codemirror2@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-5.1.0.tgz#62de4460178adea40eb52eabf7491669bf3794b8"