Fix spinner position (#398)

components/Carbon.js

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react'
 import * as hljs from 'highlight.js'
-import Spinner from 'react-spinner'
 import ResizeObserver from 'resize-observer-polyfill'
 import debounce from 'lodash.debounce'
 import ms from 'ms'
@@ -29,7 +28,6 @@ class Carbon extends PureComponent {
     super(props)
 
     this.state = {
-      loading: true,
       language: props.config.language
     }
 
@@ -40,10 +38,6 @@ class Carbon extends PureComponent {
   }
 
   componentDidMount() {
-    this.setState({
-      loading: false
-    })
-
     this.setState(handleLanguageChange(this.props.children, this.props))
 
     const ro = new ResizeObserver(entries => {
@@ -93,21 +87,7 @@ class Carbon extends PureComponent {
       (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
       this.props.config.backgroundImage
 
-    // set content to spinner if loading, else editor
+    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
@@ -246,7 +226,6 @@ class Carbon extends PureComponent {
         </style>
       </div>
     )
-    }
 
     return (
       <div id="section">

components/Editor.js

@@ -4,6 +4,7 @@ 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'
@@ -43,6 +44,7 @@ class Editor extends React.Component {
     super(props)
     this.state = {
       ...DEFAULT_SETTINGS,
+      loading: true,
       uploading: false,
       code: props.content
     }
@@ -65,7 +67,8 @@ class Editor extends React.Component {
     // Load from localStorage and then URL params
     this.setState({
       ...getState(localStorage),
-      ...this.props.initialState
+      ...this.props.initialState,
+      loading: false
     })
   }
 
@@ -191,6 +194,9 @@ class Editor extends React.Component {
   }
 
   render() {
+    if (this.state.loading) {
+      return <Spinner />
+    }
     return (
       <React.Fragment>
         <div id="editor">

components/Slider.js

@@ -27,9 +27,8 @@ export default class extends React.Component {
         <div
           className="slider-bg"
           style={{
-            transform: `translate3d(${(parseInt(this.props.value, 10) - minValue) *
+            transform: `translate3d(${(((parseInt(this.props.value, 10) - minValue) * 1.0) /
-              1.0 /
+              (maxValue - minValue)) *
-              (maxValue - minValue) *
               100}%, 0px, 0px)`
           }}
         />

handlers/twitter.js

@@ -14,7 +14,7 @@ try {
   })
 } catch (e) {
   // eslint-disable-next-line
-  console.warn(e.message);
+  console.warn(e.message)
 }
 const extractMediaId = morph.get('data.media_id_string')
 const extractImageUrl = morph.get('data.entities.media.0.display_url')
@@ -22,10 +22,10 @@ const extractErrorCode = morph.get('0.code')
 
 const uploadImage = data => client.post('media/upload', { media_data: data })
 const uploadMetadata = (altText, twitterRes = {}) => {
-  if (!altText)
+  if (!altText) return twitterRes
-    return twitterRes
 
-  const formattedAltText = altText.length > MAX_ALT_TEXT_LENGTH
+  const formattedAltText =
+    altText.length > MAX_ALT_TEXT_LENGTH
       ? `${altText.slice(0, MAX_ALT_TEXT_LENGTH - 3)}...`
       : altText
 
@@ -36,7 +36,8 @@ const uploadMetadata = (altText, twitterRes = {}) => {
     })
     .then(() => twitterRes)
 }
-const uploadTweet = (twitterRes = {}) => client.post('statuses/update', {
+const uploadTweet = (twitterRes = {}) =>
+  client.post('statuses/update', {
     status: `Carbon Copy #${extractMediaId(twitterRes).slice(0, 8)}`,
     media_ids: extractMediaId(twitterRes)
   })

lib/util.js

@@ -23,7 +23,11 @@ const escapeHtml = s => {
 
 export const parseRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
 
-export const getState = morph.compose(parse, escapeHtml, morph.get(KEY))
+export const getState = morph.compose(
+  parse,
+  escapeHtml,
+  morph.get(KEY)
+)
 export const saveState = (window, v) => assign(window, JSON.stringify(v))
 
 export const capitalizeFirstLetter = s => s.charAt(0).toUpperCase() + s.slice(1)

yarn.lock

@@ -874,9 +874,9 @@ align-text@^0.1.1, align-text@^0.1.3:
     longest "^1.0.1"
     repeat-string "^1.5.2"
 
-all-contributors-cli@^4.7.0:
+all-contributors-cli@^5.0.0:
-  version "4.11.2"
+  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-4.11.2.tgz#b8bf1e1d08181be76ca4ebeb7869d3fdfbcf5557"
+  resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-5.0.0.tgz#d27703572996c076b758ae9a6c86391f9490e9b3"
   dependencies:
     async "^2.0.0-rc.1"
     chalk "^2.3.0"