Fix - revamp Loader (inline SVG)

components/loader/FullLoader.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { c } from 'ttag';
+
+import { classnames } from '../../helpers/component';
+
+interface Props {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+const FullLoader = ({ size = 50, color, className }: Props) => {
+    const isSmall = size < 50;
+
+    const diameter = isSmall ? 10 : 100;
+    const radius = isSmall ? 8 : 80;
+    const viewBox = isSmall ? '0 0 20 20' : '0 0 200 200';
+
+    return (
+        <>
+            <svg
+                className={classnames(['loadingAnimation', className])}
+                viewBox={viewBox}
+                width={size}
+                height={size}
+                role="img"
+                aria-hidden="true"
+                focusable="false"
+            >
+                <circle
+                    cx={diameter}
+                    cy={diameter}
+                    r={radius}
+                    className={classnames([
+                        'loadingAnimation-circle',
+                        isSmall ? 'loadingAnimation-orbit1--smaller' : 'loadingAnimation-orbit1',
+                        isSmall && 'loadingAnimation-circle--smaller',
+                        color && `loadingAnimation-circle--${color}`
+                    ])}
+                />
+                <circle
+                    cx={diameter}
+                    cy={diameter}
+                    r={radius}
+                    className={classnames([
+                        'loadingAnimation-circle',
+                        isSmall ? 'loadingAnimation-orbit2--smaller' : 'loadingAnimation-orbit2',
+                        isSmall && 'loadingAnimation-circle--smaller',
+                        color && `loadingAnimation-circle--${color}`
+                    ])}
+                />
+            </svg>
+            <span className="sr-only">{c('Info').t`Loading`}</span>
+        </>
+    );
+};
+
+export default FullLoader;

components/loader/Loader.tsx

@@ -1,31 +1,21 @@
 import React from 'react';
-import { c } from 'ttag';
-import loadingSvg from 'design-system/assets/img/shared/loading-atom.svg';
-import loadingSmallerSvg from 'design-system/assets/img/shared/loading-atom-smaller.svg';
+import FullLoader from './FullLoader';
 
-const IMAGES = {
-    small: loadingSmallerSvg,
-    medium: loadingSvg,
-    big: loadingSvg
+const SIZE = {
+    small: 20,
+    medium: 80,
+    big: 200
 };
 
-const MEDIUM_WIDTH = '80';
-const MEDIUM_HEIGHT = '80';
-
 interface Props {
     size?: 'small' | 'medium' | 'big';
+    color?: string;
 }
 
-const Loader = ({ size = 'small' }: Props) => {
+const Loader = ({ size = 'small', color = '' }: Props) => {
     return (
         <div className="center flex mb2 mt2">
-            <img
-                className="mauto"
-                src={IMAGES[size]}
-                width={size === 'medium' ? MEDIUM_WIDTH : undefined}
-                height={size === 'medium' ? MEDIUM_HEIGHT : undefined}
-                alt={c('Info').t`Loading`}
-            />
+            <FullLoader size={SIZE[size]} color={color} className="mauto" />
         </div>
     );
 };