Fix/#1339 consolidate spinners

app/src/components/common/icons/IconSpinner2.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+interface Props {
+  spinnerSize?: string
+}
+
+export const IconSpinner = (props: Props) => {
+  const { spinnerSize = '40' } = props
+  return (
+    <svg fill="none" height={spinnerSize} viewBox="0 0 40 40" width={spinnerSize} xmlns="http://www.w3.org/2000/svg">
+      <circle cx="20" cy="20" r="19" stroke="#E8EAF6" strokeWidth="2" />
+      <path
+        d="M20 39C30.4934 39 39 30.4934 39 20C39 9.50659 30.4934 1 20 1C9.50659 1 1 9.50659 1 20"
+        stroke="#3F51B5"
+        strokeWidth="2"
+      />
+    </svg>
+  )
+}

app/src/components/common/icons/index.ts

@@ -23,3 +23,4 @@ export { IconSearchGrey } from './IconSearchGrey'
 export { IconKleros } from './IconKleros'
 export { IconExclamation } from './IconExclamation'
 export { IconSchedule } from './IconSchedule'
+export { IconSpinner } from './IconSpinner2'

app/src/components/common/spinner/index.tsx

@@ -1,8 +1,7 @@
 import React, { HTMLAttributes } from 'react'
 import styled, { keyframes } from 'styled-components'
 
-import SpinnerSVG from './img/spinnerMain.svg'
-import SpinnerBigSVG from './img/spinnerMainBig.svg'
+import { IconSpinner } from '../icons'
 
 const rotate = keyframes`
   from {
@@ -13,37 +12,24 @@ const rotate = keyframes`
   }
 `
 
-const RotatingSpinner = styled.div<{ height: string | undefined; width: string | undefined }>`
+const RotatingSpinner = styled.div`
   animation: ${rotate} 2s linear infinite;
   flex-grow: 0;
   flex-shrink: 0;
-  height: ${props => props.height};
-  width: ${props => props.width};
-`
-
-RotatingSpinner.defaultProps = {
-  height: '42px',
-  width: '42px',
-}
-
-const SpinnerIcon = styled.img`
-  height: 100%;
-  width: 100%;
 `
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   color?: string
-  height?: string | undefined
-  width?: string | undefined
+  size?: string
   big?: boolean | undefined
 }
 
 export const Spinner: React.FC<Props> = (props: Props) => {
-  const { big, color = '#fff', height, width, ...restProps } = props
+  const { big, color = '#fff', size, ...restProps } = props
 
   return (
-    <RotatingSpinner color={color} height={height} width={width} {...restProps}>
-      <SpinnerIcon alt="Loading..." src={big ? SpinnerBigSVG : SpinnerSVG} />
+    <RotatingSpinner color={color} {...restProps}>
+      <IconSpinner spinnerSize={big ? '42' : size ? size : '40'} />
     </RotatingSpinner>
   )
 }

app/src/components/market/common/currency_selector/index.tsx

@@ -100,7 +100,7 @@ export const CurrencySelector: React.FC<Props> = props => {
         dropdownPosition={DropdownPosition.center}
         items={currencyDropdownData}
         maxHeight={true}
-        placeholder={currency && currentItem === undefined ? <Spinner height={'18px'} width={'18px'} /> : placeholder}
+        placeholder={currency && currentItem === undefined ? <Spinner size="18" /> : placeholder}
         selected={false}
       />
     </Wrapper>

app/src/components/market/common/customizable_tokens_select/modal_collateral.tsx

@@ -58,7 +58,7 @@ export const ModalCollateral = (props: Props) => {
   }
 
   const spinner = () => {
-    return isSpinnerOn && <SpinnerStyled height={'25px'} width={'25px'} />
+    return isSpinnerOn && <SpinnerStyled size="25" />
   }
 
   const tokenDetails = () => {

app/src/components/market/sections/market_create/steps/items/import_market_content.tsx

@@ -341,7 +341,7 @@ export const ImportMarketContent = (props: Props) => {
       <EmptyWrapper>
         {state.loading && (
           <>
-            <SpinnerStyled height={'38px'} width={'38px'} />
+            <SpinnerStyled size="38" />
             <CommentLabel>
               importing market from{' '}
               <a href={realitioBaseUrl} target="_blink">

app/src/components/market/sections/market_verify/market_verify.tsx

@@ -104,7 +104,7 @@ const MarketVerifyWrapper: React.FC<Props> = (props: Props) => {
     <MarketVerification>
       {loading || !data ? (
         <CurationRow>
-          <CustomInlineLoading big message="Loading Curation Services" />
+          <CustomInlineLoading message="Loading Curation Services" />
         </CurationRow>
       ) : (
         <>