[components] Smooth spinner with proper fullscreen (#1012)

packages/@sanity/base/src/components/icons/SpinnerIcon.js

@@ -1,3 +1,17 @@
-import SpinnerIcon from 'react-icons/lib/fa/circle-o-notch'
+import React from 'react'
+
+const SpinnerIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+  >
+    <path
+      d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 7.84072 4.53924 4.27455 8.15208 2.76711L7.38316 0.920257C3.04741 2.72903 0 7.00861 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 7.00842 20.9524 2.72869 16.6163 0.920044L15.8464 2.76647C19.46 4.27354 22 7.84013 22 12Z"
+      fill="currentColor"
+    />
+  </svg>
+)
 
 export default SpinnerIcon

packages/@sanity/components/src/loading/Spinner.js

@@ -2,49 +2,17 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import styles from 'part:@sanity/components/loading/spinner-style'
 import SpinnerIcon from 'part:@sanity/base/spinner-icon'
+import {Portal} from '../utilities/Portal'
 
-export default class Spinner extends React.Component {
+export default class Spinner extends React.PureComponent {
   static propTypes = {
     inline: PropTypes.bool,
     message: PropTypes.string,
     fullscreen: PropTypes.bool,
     center: PropTypes.bool
   }
 
-  renderSvg() {
-    return (
-      <svg
-        width="126px"
-        height="126px"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid"
-      >
-        <rect x="0" y="0" width="100" height="100" fill="none" />
-        <circle
-          cx="50"
-          cy="50"
-          r="49.5"
-          strokeDasharray="202.1614872585032 108.85618544688634"
-          stroke="currentColor"
-          fill="none"
-          strokeWidth="1"
-        >
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            values="0 50 50;180 50 50;360 50 50;"
-            keyTimes="0;0.5;1"
-            dur="1s"
-            repeatCount="indefinite"
-            begin="0s"
-          />
-        </circle>
-      </svg>
-    )
-  }
-
-  render() {
+  renderSpinner() {
     const {inline, message, fullscreen, center} = this.props
     return (
       <div
@@ -55,10 +23,17 @@ export default class Spinner extends React.Component {
         `}
       >
         <div className={styles.inner}>
-          {fullscreen || center ? this.renderSvg() : <SpinnerIcon color="inherit" />}
+          <span className={styles.icon}>
+            <SpinnerIcon />
+          </span>
           {message && <div className={styles.message}>{message}</div>}
         </div>
       </div>
     )
   }
+
+  render() {
+    const {fullscreen} = this.props
+    return fullscreen ? <Portal>{this.renderSpinner()}</Portal> : this.renderSpinner()
+  }
 }

packages/@sanity/components/src/loading/styles/Spinner.css

@@ -16,12 +16,13 @@
 
 .block {
   composes: root;
-  display: block;
+  display: flex;
   text-align: center;
+  justify-content: center;
+  align-items: center;
 
-  @nest & svg {
-    height: 1em;
-    width: 1em;
+  @nest & .inner {
+    display: block;
   }
 
   @nest & .message {
@@ -33,15 +34,45 @@
   composes: root;
   display: inline-block;
 
-  @nest & svg {
-    margin-top: -0.2em;
+  @nest & .inner {
+    display: inline-flex;
+  }
+
+  @nest & .icon {
     height: 1em;
     width: 1em;
+    display: block;
+    align-self: center;
   }
 
   @nest & .message {
     margin-left: 0.5em;
-    display: inline;
+    display: block;
+  }
+}
+
+.inline.center .message {
+  margin-left: 1em;
+}
+
+.icon {
+  display: inline-block;
+  animation-name: spin;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  transform-origin: center center;
+  shape-rendering: geometricPrecision;
+  height: 1em;
+  width: 1em;
+
+  @nest & svg {
+    display: block;
+    padding: 0;
+    margin: 0;
+    height: inherit;
+    width: inherit;
+    shape-rendering: geometricPrecision;
   }
 }
 
@@ -52,6 +83,7 @@
   width: 100%;
   top: 0;
   left: 0;
+  box-sizing: border-box;
 
   @media (--screen-medium) {
     background-color: color(var(--body-bg) a(10%));
@@ -64,39 +96,23 @@
     transform: translateX(-50%) translateY(-50%);
   }
 
-  @nest & svg {
-    display: inline-block;
-    text-align: center;
-    height: 3em;
-    width: 3em;
-  }
-
-  @nest & circle {
-    stroke: var(--text-color);
+  @nest & .icon {
+    height: 2em;
+    width: 2em;
   }
 
   @nest & .message {
     text-align: center;
-    line-height: 1.2em;
     display: block;
     font-weight: 300;
     white-space: pre-wrap;
+    align-self: center;
   }
 }
 
 .fullscreen {
   composes: center;
   background-color: color(var(--body-bg) a(90%));
   position: fixed;
-  width: 100vw;
-  height: 100vw;
-}
-
-.root svg {
-  transform-origin: center center;
-  animation-name: spin;
-  animation-duration: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  fill: var(--text-color);
+  z-index: var(--zindex-portal);
 }