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,160 +87,145 @@ 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 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>
           {`
-            div {
+            #container {
-              height: 352px;
+              position: relative;
+              min-width: ${config.widthAdjustment ? '90px' : '680px'};
+              max-width: 1024px; /* The Fallback */
+              max-width: 92vw;
+              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};
+              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; /* The Fallback */
-                max-width: 92vw;
-                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};
-                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">

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
     })
   }
 
@@ -115,11 +118,11 @@ class Editor extends React.Component {
     if (type === 'blob') {
       if (format === 'svg') {
         return domtoimage
-        .toSvg(node, config)
+          .toSvg(node, config)
-        .then(dataUrl => dataUrl.split(' ').join(' '))
+          .then(dataUrl => dataUrl.split(' ').join(' '))
-        .then(uri => uri.slice(uri.indexOf(',') + 1))
+          .then(uri => uri.slice(uri.indexOf(',') + 1))
-        .then(data => new Blob([data], { type: 'image/svg+xml' }))
+          .then(data => new Blob([data], { type: 'image/svg+xml' }))
-        .then(data => window.URL.createObjectURL(data))
+          .then(data => window.URL.createObjectURL(data))
       }
 
       return domtoimage.toBlob(node, config).then(blob => window.URL.createObjectURL(blob))
@@ -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,12 +22,12 @@ 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.slice(0, MAX_ALT_TEXT_LENGTH - 3)}...`
+    altText.length > MAX_ALT_TEXT_LENGTH
-    : altText
+      ? `${altText.slice(0, MAX_ALT_TEXT_LENGTH - 3)}...`
+      : altText
 
   return client
     .post('media/metadata/create', {
@@ -36,10 +36,11 @@ 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)
-})
+  })
 
 const respondSuccess = (res, url) => res.json({ url })
 const respondFail = (res, err) => {

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"