From 0c7d2e2c9fa4eebb88c75c7e9bd0ea70d2d11c95 Mon Sep 17 00:00:00 2001
From: FernTheDev <15272073+Fernthedev@users.noreply.github.com>
Date: Mon, 21 Sep 2020 22:13:17 -0400
Subject: [PATCH] feat(Login): add spinner on login

---
 .../LoadingSpinner/LoadingSpinner.stories.tsx | 24 +++++++++++
 .../components/LoadingSpinner/Styles.ts       | 42 +++++++++++++++++++
 .../components/LoadingSpinner/index.tsx       | 41 ++++++++++++++++++
 .../src/shared/components/Login/index.tsx     |  2 +
 4 files changed, 109 insertions(+)
 create mode 100644 frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx
 create mode 100644 frontend/src/shared/components/LoadingSpinner/Styles.ts
 create mode 100644 frontend/src/shared/components/LoadingSpinner/index.tsx

diff --git a/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx b/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx
new file mode 100644
index 0000000..8f66e5f
--- /dev/null
+++ b/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import LoadingSpinner from '.';
+
+export default {
+  component: LoadingSpinner,
+  title: 'Login',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#cdd3e1', default: true },
+    ],
+  },
+};
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <LoadingSpinner />
+    </>
+  );
+};
diff --git a/frontend/src/shared/components/LoadingSpinner/Styles.ts b/frontend/src/shared/components/LoadingSpinner/Styles.ts
new file mode 100644
index 0000000..d203940
--- /dev/null
+++ b/frontend/src/shared/components/LoadingSpinner/Styles.ts
@@ -0,0 +1,42 @@
+import styled, { keyframes } from 'styled-components';
+
+const LoadingSpinnerKeyframes = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; borderSize: string; thickness: string }>`
+  display: inline-block;
+  position: relative;
+  width: ${props => props.borderSize};
+  height: ${props => props.borderSize};
+
+  & > div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: ${props => props.size};
+    height: ${props => props.size};
+    margin: ${props => props.thickness};
+    border: ${props => props.thickness} solid rgba(${props => props.theme.colors[props.color]});
+    border-radius: 50%;
+    animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: rgba(${props => props.theme.colors[props.color]}) transparent transparent transparent;
+  }
+
+  & > div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  & > div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  & > div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+`;
+
+export default LoadingSpinnerWrapper;
diff --git a/frontend/src/shared/components/LoadingSpinner/index.tsx b/frontend/src/shared/components/LoadingSpinner/index.tsx
new file mode 100644
index 0000000..224f275
--- /dev/null
+++ b/frontend/src/shared/components/LoadingSpinner/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { LoadingSpinnerWrapper} from './Styles';
+
+type LoadingSpinnerProps = {
+  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
+  size?: string;
+  borderSize?: string;
+  thickness?: string;
+};
+
+/**
+ * The default parameters may not be applicable to every scenario
+ *
+ * While borderSize and size should be a single prop,
+ * it is currently not as such because it would require math to be done to strings
+ * e.g "80px - 16"
+ *
+ *
+ * @param color
+ * @param size The size of the spinner. It is recommended to be at least 16 px less than the borderSize
+ * @param thickness
+ * @param borderSize Border size affects the size of the border which if is too small may break the spinner.
+ * @constructor
+ */
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  color = 'primary',
+  size = '64px',
+  thickness = '8px',
+  borderSize = '80px',
+}) => {
+  return (
+      <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
+        <div />
+        <div />
+        <div />
+      </LoadingSpinnerWrapper>
+  );
+};
+
+export default LoadingSpinner;
diff --git a/frontend/src/shared/components/Login/index.tsx b/frontend/src/shared/components/Login/index.tsx
index c339cd2..4288004 100644
--- a/frontend/src/shared/components/Login/index.tsx
+++ b/frontend/src/shared/components/Login/index.tsx
@@ -3,6 +3,7 @@ import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';
 
+import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
   Form,
   LogoWrapper,
@@ -73,6 +74,7 @@ const Login = ({ onSubmit }: LoginProps) => {
 
               <ActionButtons>
                 <RegisterButton variant="outline">Register</RegisterButton>
+                {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                 <LoginButton type="submit" disabled={!isComplete}>
                   Login
                 </LoginButton>