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,146 +90,161 @@ class Carbon extends PureComponent {
       (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
       this.props.config.backgroundImage
 
-    const content = (
+    let content = (
-      <div id="container">
+      <div>
-        {config.windowControls ? (
+        <Spinner />
-          <WindowControls
-            titleBar={this.props.titleBar}
-            theme={config.windowTheme}
-            handleTitleBarChange={this.handleTitleBarChange}
-          />
-        ) : null}
-        <CodeMirror
-          className={`CodeMirror__container window-theme__${config.windowTheme}`}
-          onBeforeChange={this.onBeforeChange}
-          value={this.props.children}
-          options={options}
-        />
-        {config.watermark && <Watermark />}
-        <div id="container-bg">
-          <div className="white eliminateOnRender" />
-          <div className="alpha eliminateOnRender" />
-          <div className="bg" />
-        </div>
         <style jsx>
           {`
-            #container {
+            div {
-              position: relative;
+              height: 352px;
-              min-width: ${config.widthAdjustment ? '90px' : '680px'};
-              max-width: 1024px;
-              padding: ${config.paddingVertical} ${config.paddingHorizontal};
-            }
-
-            #container :global(.watermark) {
-              fill-opacity: 0.3;
-              position: absolute;
-              z-index: 2;
-              bottom: calc(${config.paddingVertical} + 16px);
-              right: calc(${config.paddingHorizontal} + 16px);
-            }
-
-            #container #container-bg {
-              position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-            }
-
-            #container .white {
-              background: #fff;
-              position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-            }
-
-            #container .bg {
-              ${this.props.config.backgroundMode === 'image'
-                ? `background: url(${backgroundImage});
-                     background-size: cover;
-                     background-repeat: no-repeat;`
-                : `background: ${this.props.config.backgroundColor || config.backgroundColor};
-                     background-size: auto;
-                     background-repeat: repeat;`} position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-            }
-
-            #container .alpha {
-              position: absolute;
-              top: 0px;
-              right: 0px;
-              bottom: 0px;
-              left: 0px;
-              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
-            }
-
-            #container :global(.cm-s-dracula .CodeMirror-cursor) {
-              border-left: solid 2px #159588;
-            }
-
-            #container :global(.cm-s-solarized) {
-              box-shadow: none;
-            }
-
-            #container :global(.cm-s-solarized.cm-s-light) {
-              text-shadow: #eee8d5 0 1px;
-            }
-
-            #container :global(.CodeMirror-gutters) {
-              background-color: unset;
-              border-right: none;
-            }
-
-            #container :global(.CodeMirror__container) {
-              min-width: inherit;
-              position: relative;
-              z-index: 1;
-              border-radius: 5px;
-              ${config.dropShadow
-                ? `box-shadow: 0 ${config.dropShadowOffsetY} ${
-                    config.dropShadowBlurRadius
-                  } rgba(0, 0, 0, 0.55)`
-                : ''};
-            }
-
-            #container :global(.CodeMirror__container .CodeMirror) {
-              height: auto;
-              min-width: inherit;
-              padding: 18px 18px;
-              ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
-              font-family: ${config.fontFamily}, monospace !important;
-              font-size: ${config.fontSize};
-              line-height: ${config.lineHeight};
-              font-variant-ligatures: contextual;
-              font-feature-settings: 'calt' 1;
-              user-select: none;
-            }
-
-            #container :global(.CodeMirror-scroll) {
-              overflow: hidden !important;
-            }
-
-            #container :global(.window-theme__sharp > .CodeMirror) {
-              border-radius: 0px;
-            }
-
-            #container :global(.window-theme__bw > .CodeMirror) {
-              border: 2px solid ${COLORS.SECONDARY};
-            }
-
-            #container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
-              padding-top: 48px;
             }
           `}
         </style>
       </div>
     )
 
+    if (this.state.loading === false) {
+      content = (
+        <div id="container">
+          {config.windowControls ? (
+            <WindowControls
+              titleBar={this.props.titleBar}
+              theme={config.windowTheme}
+              handleTitleBarChange={this.handleTitleBarChange}
+            />
+          ) : null}
+          <CodeMirror
+            className={`CodeMirror__container window-theme__${config.windowTheme}`}
+            onBeforeChange={this.onBeforeChange}
+            value={this.props.children}
+            options={options}
+          />
+          {config.watermark && <Watermark />}
+          <div id="container-bg">
+            <div className="white eliminateOnRender" />
+            <div className="alpha eliminateOnRender" />
+            <div className="bg" />
+          </div>
+          <style jsx>
+            {`
+              #container {
+                position: relative;
+                min-width: ${config.widthAdjustment ? '90px' : '680px'};
+                max-width: 1024px;
+                padding: ${config.paddingVertical} ${config.paddingHorizontal};
+              }
+
+              #container :global(.watermark) {
+                fill-opacity: 0.3;
+                position: absolute;
+                z-index: 2;
+                bottom: calc(${config.paddingVertical} + 16px);
+                right: calc(${config.paddingHorizontal} + 16px);
+              }
+
+              #container #container-bg {
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                bottom: 0px;
+                left: 0px;
+              }
+
+              #container .white {
+                background: #fff;
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                bottom: 0px;
+                left: 0px;
+              }
+
+              #container .bg {
+                ${this.props.config.backgroundMode === 'image'
+                  ? `background: url(${backgroundImage});
+                       background-size: cover;
+                       background-repeat: no-repeat;`
+                  : `background: ${this.props.config.backgroundColor || config.backgroundColor};
+                       background-size: auto;
+                       background-repeat: repeat;`} position: absolute;
+                top: 0px;
+                right: 0px;
+                bottom: 0px;
+                left: 0px;
+              }
+
+              #container .alpha {
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                bottom: 0px;
+                left: 0px;
+                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
+              }
+
+              #container :global(.cm-s-dracula .CodeMirror-cursor) {
+                border-left: solid 2px #159588;
+              }
+
+              #container :global(.cm-s-solarized) {
+                box-shadow: none;
+              }
+
+              #container :global(.cm-s-solarized.cm-s-light) {
+                text-shadow: #eee8d5 0 1px;
+              }
+
+              #container :global(.CodeMirror-gutters) {
+                background-color: unset;
+                border-right: none;
+              }
+
+              #container :global(.CodeMirror__container) {
+                min-width: inherit;
+                position: relative;
+                z-index: 1;
+                border-radius: 5px;
+                ${config.dropShadow
+                  ? `box-shadow: 0 ${config.dropShadowOffsetY} ${
+                      config.dropShadowBlurRadius
+                    } rgba(0, 0, 0, 0.55)`
+                  : ''};
+              }
+
+              #container :global(.CodeMirror__container .CodeMirror) {
+                height: auto;
+                min-width: inherit;
+                padding: 18px 18px;
+                ${config.lineNumbers ? 'padding-left: 12px;' : ''} border-radius: 5px;
+                font-family: ${config.fontFamily}, monospace !important;
+                font-size: ${config.fontSize};
+                line-height: ${config.lineHeight};
+                font-variant-ligatures: contextual;
+                font-feature-settings: 'calt' 1;
+                user-select: none;
+              }
+
+              #container :global(.CodeMirror-scroll) {
+                overflow: hidden !important;
+              }
+
+              #container :global(.window-theme__sharp > .CodeMirror) {
+                border-radius: 0px;
+              }
+
+              #container :global(.window-theme__bw > .CodeMirror) {
+                border: 2px solid ${COLORS.SECONDARY};
+              }
+
+              #container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
+                padding-top: 48px;
+              }
+            `}
+          </style>
+        </div>
+      )
+    }
+
     return (
       <div id="section">
         <div id="export-container" ref={ele => (this.exportContainerNode = ele)}>

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"