Fix spinner position (#398)

7 years ago · 2a52d101e7
parent 3351623e86
commit 2a52d101e7
7 changed files with 164 additions and 175 deletions
--- a/components/Carbon.js
+++ b/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
-    let content = (
-      <div>
-        <Spinner />
+    const 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>
          {`
-            div {
-              height: 352px;
+            #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>
    )
-    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">
--- a/components/Editor.js
+++ b/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)
-        .then(dataUrl => dataUrl.split('&nbsp;').join('&#160;'))
-        .then(uri => uri.slice(uri.indexOf(',') + 1))
-        .then(data => new Blob([data], { type: 'image/svg+xml' }))
-        .then(data => window.URL.createObjectURL(data))
+          .toSvg(node, config)
+          .then(dataUrl => dataUrl.split('&nbsp;').join('&#160;'))
+          .then(uri => uri.slice(uri.indexOf(',') + 1))
+          .then(data => new Blob([data], { type: 'image/svg+xml' }))
+          .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">
--- a/components/Slider.js
+++ b/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) *
-              1.0 /
-              (maxValue - minValue) *
+            transform: `translate3d(${(((parseInt(this.props.value, 10) - minValue) * 1.0) /
+              (maxValue - minValue)) *
              100}%, 0px, 0px)`
          }}
        />
--- a/handlers/twitter.js
+++ b/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)
-    return twitterRes
+  if (!altText) return twitterRes

-  const formattedAltText = altText.length > MAX_ALT_TEXT_LENGTH
-    ? `${altText.slice(0, MAX_ALT_TEXT_LENGTH - 3)}...`
-    : altText
+  const formattedAltText =
+    altText.length > MAX_ALT_TEXT_LENGTH
+      ? `${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) => {
--- a/lib/util.js
+++ b/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)
--- a/yarn.lock
+++ b/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:
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/all-contributors-cli/-/all-contributors-cli-4.11.2.tgz#b8bf1e1d08181be76ca4ebeb7869d3fdfbcf5557"
+all-contributors-cli@^5.0.0:
+  version "5.0.0"
+  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"