New spinner (#1023)

* new spinner

* snipper component

* remove react-spinner

* undo unnecessary changes

components/RandomImage.js

@@ -1,7 +1,7 @@
 import React from 'react'
-import Spinner from 'react-spinner'
 import { useAsyncCallback } from 'actionsack'
 
+import { Spinner } from './SpinnerWrapper'
 import { useAPI } from './ApiContext'
 import PhotoCredit from './PhotoCredit'
 

components/SpinnerWrapper.js

@@ -1,5 +1,52 @@
 import React from 'react'
-import Spinner from 'react-spinner'
+
+export function Spinner({ size = 24 }) {
+  return (
+    <div className="bounce">
+      <div className="bounce-dot"></div>
+      <div className="bounce-dot"></div>
+      <style jsx>
+        {`
+          .bounce {
+            width: ${size}px;
+            height: ${size}px;
+            position: relative;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+
+          .bounce-dot {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.7);
+            opacity: 0.6;
+            position: absolute;
+            top: 0;
+            left: 0;
+            animation: bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
+          }
+
+          .bounce-dot:nth-child(2) {
+            animation-delay: -1s;
+          }
+
+          @keyframes bounce {
+            0%,
+            100% {
+              transform: scale(0);
+            }
+            45%,
+            55% {
+              transform: scale(1);
+            }
+          }
+        `}
+      </style>
+    </div>
+  )
+}
 
 export default function SpinnerWrapper(props) {
   if (props.loading) {

components/style/Reset.js

@@ -208,27 +208,6 @@ export default () => (
         background: none;
       }
 
-      .react-spinner {
-        z-index: 999;
-        position: relative;
-        width: 32px;
-        height: 32px;
-        top: 50%;
-        left: 50%;
-      }
-      .react-spinner_bar {
-        -webkit-animation: react-spinner_spin 1.2s linear infinite;
-        -moz-animation: react-spinner_spin 1.2s linear infinite;
-        animation: react-spinner_spin 1.2s linear infinite;
-        border-radius: 5px;
-        background-color: #fff;
-        position: absolute;
-        width: 20%;
-        height: 7.8%;
-        top: -3.9%;
-        left: -10%;
-      }
-
       .row {
         display: flex;
       }
@@ -246,31 +225,6 @@ export default () => (
       [role='button']:focus {
         outline: none;
       }
-
-      @keyframes react-spinner_spin {
-        0% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 0.15;
-        }
-      }
-      @-moz-keyframes react-spinner_spin {
-        0% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 0.15;
-        }
-      }
-      @-webkit-keyframes react-spinner_spin {
-        0% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 0.15;
-        }
-      }
     `}
   </style>
 )

package.json

@@ -54,7 +54,6 @@
     "react-dom": "^16.13.1",
     "react-image-crop": "^6.0.16",
     "react-is": "^16.13.1",
-    "react-spinner": "^0.2.7",
     "react-stripe-elements": "^6.1.2",
     "react-syntax-highlight": "^15.3.1",
     "serialize-javascript": "^3.0.0",

public/static/react-spinner.css

@@ -1 +0,0 @@
-.react-spinner{z-index: 999;position:relative;width:32px;height:32px;top:50%;left:50%}.react-spinner_bar{-webkit-animation:react-spinner_spin 1.2s linear infinite;-moz-animation:react-spinner_spin 1.2s linear infinite;animation:react-spinner_spin 1.2s linear infinite;border-radius:5px;background-color:#fff;position:absolute;width:20%;height:7.8%;top:-3.9%;left:-10%}@keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-moz-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}@-webkit-keyframes react-spinner_spin{0%{opacity:1}100%{opacity:.15}}

yarn.lock

@@ -8807,11 +8807,6 @@ react-refresh@0.8.2:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.2.tgz#24bb0858eac92b0d7b0dd561747f0c9fd6c60327"
   integrity sha512-n8GXxo3DwM2KtFEL69DAVhGc4A1THn2qjmfvSo3nze0NLCoPbywazeJPqdp0RdSGLmyhQzeyA+XPXOobbYlkzg==
 
-react-spinner@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/react-spinner/-/react-spinner-0.2.7.tgz#ea3ca3375dd7a54edbb5cc01d17496a2e2fc14db"
-  integrity sha1-6jyjN13XpU7btcwB0XSWouL8FNs=
-
 react-stripe-elements@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/react-stripe-elements/-/react-stripe-elements-6.1.2.tgz#bd277e86d0b868a6fac9358df09e0d38149b6736"