From d16df95bda2d50f45122d4f28e511e9281caf53b Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Thu, 14 Feb 2019 21:49:16 -0800
Subject: [PATCH] use editor mount for loading instead of carbon's

---
 components/Carbon.js         | 2 +-
 components/Editor.js         | 9 ++++++---
 components/SpinnerWrapper.js | 8 +-------
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/Carbon.js b/components/Carbon.js
index 15229b6..e55dbed 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -224,7 +224,7 @@ class Carbon extends React.PureComponent {
     return (
       <div className="section">
         <div className="export-container" ref={this.props.innerRef} id="export-container">
-          <SpinnerWrapper>{content}</SpinnerWrapper>
+          <SpinnerWrapper loading={this.props.loading}>{content}</SpinnerWrapper>
           <div className="twitter-png-fix" />
         </div>
         <style jsx>
diff --git a/components/Editor.js b/components/Editor.js
index a2eb35d..53ace37 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -42,7 +42,8 @@ class Editor extends React.Component {
     super(props)
     this.state = {
       ...DEFAULT_SETTINGS,
-      preset: DEFAULT_PRESET_ID
+      preset: DEFAULT_PRESET_ID,
+      loading: true
     }
 
     this.export = this.export.bind(this)
@@ -80,7 +81,8 @@ class Editor extends React.Component {
       // Load from localStorage
       ...getSettings(localStorage),
       // and then URL params
-      ...initialState
+      ...initialState,
+      loading: false
     }
 
     // Makes sure the slash in 'application/X' is decoded
@@ -334,12 +336,13 @@ class Editor extends React.Component {
                 {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
                 <Carbon
                   key={language}
+                  ref={this.carbonNode}
                   config={this.state}
                   onChange={this.updateCode}
                   onAspectRatioChange={this.updateAspectRatio}
                   titleBar={titleBar}
                   updateTitleBar={this.updateTitleBar}
-                  ref={this.carbonNode}
+                  loading={this.state.loading}
                 >
                   {code != null ? code : DEFAULT_CODE}
                 </Carbon>
diff --git a/components/SpinnerWrapper.js b/components/SpinnerWrapper.js
index 4158c1a..c2c15f5 100644
--- a/components/SpinnerWrapper.js
+++ b/components/SpinnerWrapper.js
@@ -2,13 +2,7 @@ import React from 'react'
 import Spinner from 'react-spinner'
 
 export default function SpinnerWrapper(props) {
-  const [loading, setLoading] = React.useState(true)
-
-  React.useEffect(() => {
-    setLoading(false)
-  }, [])
-
-  if (loading) {
+  if (props.loading) {
     return (
       <div>
         <Spinner />