From d30c3fc1b55963e3af4fd97fe848eabfd42d9cd9 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 20 Jul 2020 22:18:39 -0700
Subject: [PATCH] a cute new hanger spinner ^w^

---
 src/app/HomePage.js                   |  2 +
 src/app/WardrobePage/OutfitPreview.js |  5 +-
 src/app/components/HangerSpinner.js   | 91 +++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 src/app/components/HangerSpinner.js

diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index cf499c4e..8a4a27df 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -6,6 +6,7 @@ import { useHistory } from "react-router-dom";
 import { useLazyQuery } from "@apollo/react-hooks";
 
 import { Heading1, usePageTitle } from "./util";
+import HangerSpinner from "./components/HangerSpinner";
 
 import HomepageSplashImg from "../images/homepage-splash.png";
 import HomepageSplashImg2x from "../images/homepage-splash@2x.png";
@@ -192,6 +193,7 @@ function SubmitPetForm() {
           colorScheme="green"
           isDisabled={!petName}
           isLoading={loading}
+          spinner={<HangerSpinner />}
           backgroundColor="green.600" // for AA contrast
           _hover={{ backgroundColor: "green.700" }}
         >
diff --git a/src/app/WardrobePage/OutfitPreview.js b/src/app/WardrobePage/OutfitPreview.js
index 4d3c8bdb..5deec475 100644
--- a/src/app/WardrobePage/OutfitPreview.js
+++ b/src/app/WardrobePage/OutfitPreview.js
@@ -2,9 +2,10 @@ import React from "react";
 import { css, cx } from "emotion";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
-import { Box, Flex, Spinner, Text } from "@chakra-ui/core";
+import { Box, Flex, Text } from "@chakra-ui/core";
 import { WarningIcon } from "@chakra-ui/icons";
 
+import HangerSpinner from "../components/HangerSpinner";
 import useOutfitAppearance from "./useOutfitAppearance";
 
 /**
@@ -121,7 +122,7 @@ export function OutfitLayers({ loading, visibleLayers, doAnimations = false }) {
           />
         </FullScreenCenter>
         <FullScreenCenter>
-          <Spinner color="green.400" size="xl" />
+          <HangerSpinner color="green.300" boxSize="48px" />
         </FullScreenCenter>
       </Box>
     </Box>
diff --git a/src/app/components/HangerSpinner.js b/src/app/components/HangerSpinner.js
new file mode 100644
index 00000000..f0f5294f
--- /dev/null
+++ b/src/app/components/HangerSpinner.js
@@ -0,0 +1,91 @@
+import * as React from "react";
+import { css } from "emotion";
+import { Box } from "@chakra-ui/core";
+import { createIcon } from "@chakra-ui/icons";
+
+const HangerIcon = createIcon({
+  displayName: "HangerIcon",
+
+  // https://www.svgrepo.com/svg/108090/clothes-hanger
+  viewBox: "0 0 473 473",
+  path: (
+    <path
+      fill="currentColor"
+      d="M451.426,315.003c-0.517-0.344-1.855-0.641-2.41-0.889l-201.09-88.884v-28.879c38.25-4.6,57.136-29.835,57.136-62.28c0-35.926-25.283-63.026-59.345-63.026c-35.763,0-65.771,29.481-65.771,64.384c0,6.005,4.973,10.882,10.978,10.882c1.788,0,3.452-0.535,4.934-1.291c3.519-1.808,6.024-5.365,6.024-9.591c0-22.702,20.674-42.62,44.217-42.62c22.003,0,37.982,17.356,37.982,41.262c0,23.523-19.011,41.262-44.925,41.262c-6.005,0-10.356,4.877-10.356,10.882v21.267v21.353c0,0.21-0.421,0.383-0.401,0.593L35.61,320.55C7.181,330.792-2.554,354.095,0.554,371.881c3.194,18.293,18.704,30.074,38.795,30.074H422.26c23.782,0,42.438-12.307,48.683-32.942C477.11,348.683,469.078,326.766,451.426,315.003z M450.115,364.031c-3.452,11.427-13.607,18.8-27.846,18.8H39.349c-9.725,0-16.104-5.394-17.5-13.368c-1.587-9.104,4.265-22.032,21.831-28.42l199.531-94.583l196.844,87.65C449.303,340.717,453.434,353.072,450.115,364.031z"
+    />
+  ),
+});
+
+function HangerSpinner(props) {
+  return (
+    <>
+      <Box
+        className={css`
+          /*
+            Adapted from animate.css "swing". We spend 75% of the time swinging,
+            then 25% of the time pausing before the next loop.
+
+            We use this animation for folks who are okay with dizzy-ish motion.
+            For reduced motion, we use a pulse-fade instead.
+          */
+          @keyframes swing {
+            15% {
+              transform: rotate3d(0, 0, 1, 15deg);
+            }
+
+            30% {
+              transform: rotate3d(0, 0, 1, -10deg);
+            }
+
+            45% {
+              transform: rotate3d(0, 0, 1, 5deg);
+            }
+
+            60% {
+              transform: rotate3d(0, 0, 1, -5deg);
+            }
+
+            75% {
+              transform: rotate3d(0, 0, 1, 0deg);
+            }
+
+            100% {
+              transform: rotate3d(0, 0, 1, 0deg);
+            }
+          }
+
+          /*
+            A homebrew fade-pulse animation. We use this for folks who don't
+            like motion. It's an important accessibility thing!
+          */
+          @keyframes fade-pulse {
+            0% {
+              opacity: 0.2;
+            }
+
+            50% {
+              opacity: 1;
+            }
+
+            100% {
+              opacity: 0.2;
+            }
+          }
+
+          @media (prefers-reduced-motion: no-preference) {
+            animation: 1.2s infinite swing;
+            transform-origin: top center;
+          }
+
+          @media (prefers-reduced-motion: reduce) {
+            animation: 1.6s infinite fade-pulse;
+          }
+        `}
+      >
+        <HangerIcon {...props} />
+      </Box>
+    </>
+  );
+}
+
+export default HangerSpinner;