Adds prop for button to show progress loader

src/components/Form/Button.tsx

@@ -1,7 +1,9 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import colors from 'styles/colors';
 import { InputSize, applySize } from 'styles/dimensions';
 
+type LoadState = 'loading' | 'success' | 'error';
+
 interface ButtonProps {
   children: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -10,6 +12,7 @@ interface ButtonProps {
   fgColor?: string,
   styles?: string,
   title?: string,
+  loadState?: LoadState,
 };
 
 const StyledButton = styled.button<ButtonProps>`
@@ -19,6 +22,9 @@ const StyledButton = styled.button<ButtonProps>`
   font-family: PTMono;
   box-sizing: border-box; 
   width: -moz-available;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
   box-shadow: 3px 3px 0px ${colors.fgShadowColor};
   &:hover {
     box-shadow: 5px 5px 0px ${colors.fgShadowColor};
@@ -36,8 +42,29 @@ const StyledButton = styled.button<ButtonProps>`
   ${props => props.styles}
 `;
 
+
+const spinAnimation = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+const SimpleLoader = styled.div`
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top: 4px solid ${colors.background};
+  width: 1rem;
+  height: 1rem;
+  animation: ${spinAnimation} 1s linear infinite;
+`;
+
+const Loader = (props: { loadState: LoadState }) => {
+  if (props.loadState === 'loading') return <SimpleLoader />
+  if (props.loadState === 'success') return <span>✔</span>
+  if (props.loadState === 'error') return <span>✗</span>
+  return <span></span>;
+};
+
 const Button = (props: ButtonProps): JSX.Element => {
-  const { children, size, bgColor, fgColor, onClick, styles, title } = props;
+  const { children, size, bgColor, fgColor, onClick, styles, title, loadState } = props;
   return (
     <StyledButton
       onClick={onClick || (() => null) }
@@ -47,6 +74,7 @@ const Button = (props: ButtonProps): JSX.Element => {
       styles={styles}
       title={title?.toString()}
       >
+      { loadState && <Loader loadState={loadState} /> }
       {children}
     </StyledButton>
   );