From d137bb272180ac27b640fc3dcd5735a8e70c4969 Mon Sep 17 00:00:00 2001
From: Nicolas Hoffmann <dante3333@gmail.com>
Date: Fri, 24 Jan 2020 18:11:56 +0100
Subject: [PATCH 1/5] Fix - revamp Loader (inline SVG)

---
 components/loader/Loader.tsx | 63 +++++++++++++++++++++++++++---------
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/components/loader/Loader.tsx b/components/loader/Loader.tsx
index d7e3bda13..948bb6450 100644
--- a/components/loader/Loader.tsx
+++ b/components/loader/Loader.tsx
@@ -1,31 +1,62 @@
 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 { classnames } from '../../helpers/component';
 
-const IMAGES = {
-    small: loadingSmallerSvg,
-    medium: loadingSvg,
-    big: loadingSvg
+const WIDTH = {
+    small: '20',
+    medium: '80',
+    big: '200'
 };
 
-const MEDIUM_WIDTH = '80';
-const MEDIUM_HEIGHT = '80';
+const CLASSES_ORBIT1 = {
+    small: 'loadingAnimation-circle--smaller loadingAnimation-orbit1--smaller',
+    medium: 'loadingAnimation-orbit1',
+    big: 'loadingAnimation-orbit1'
+};
+const CLASSES_ORBIT2 = {
+    small: 'loadingAnimation-circle--smaller loadingAnimation-orbit2--smaller',
+    medium: 'loadingAnimation-orbit2',
+    big: 'loadingAnimation-orbit2'
+};
+
+
 
 interface Props {
     size?: 'small' | 'medium' | 'big';
+    bgColor?: string;
 }
 
-const Loader = ({ size = 'small' }: Props) => {
+
+const Loader = ({ size = 'small', bgColor = '' }: Props) => {
+    const diameter = size !== 'small' ? '100' : '10';
+    const radius = size !== 'small' ? '80' : '8';
+
+    const classNameOrbit = [ 'loadingAnimation-circle ', bgColor === 'primary' && 'loadingAnimation-circle--pm-primary' ];
+    const classNameOrbit1 = classnames([ ...classNameOrbit, CLASSES_ORBIT1[size] ]);
+    const classNameOrbit2 = classnames([ ...classNameOrbit, CLASSES_ORBIT2[size] ]);
+
     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`}
-            />
+            <svg xmlns="http://www.w3.org/2000/svg"
+                className="loadingAnimation mauto"
+                role="img"
+                aria-hidden="true"
+                focusable="false"
+                viewBox={ size !== 'small' ? '0 0 200 200' : '0 0 20 20' }
+                width={WIDTH[size]}
+                height={WIDTH[size]}>
+                <circle
+                    cx={diameter}
+                    cy={diameter}
+                    r={radius}
+                    className={classNameOrbit1} />
+                <circle
+                    cx={diameter}
+                    cy={diameter}
+                    r={radius}
+                    className={classNameOrbit2} />
+            </svg>
+            <span className="sr-only">{c('Info').t`Loading`}</span>
         </div>
     );
 };

From bdf18c7bc4b3642246e8635961ef7694c888f91a Mon Sep 17 00:00:00 2001
From: Nicolas Hoffmann <dante3333@gmail.com>
Date: Mon, 27 Jan 2020 14:48:28 +0100
Subject: [PATCH 2/5] Fix - remove spaces

---
 components/loader/Loader.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/loader/Loader.tsx b/components/loader/Loader.tsx
index 948bb6450..ceaed8777 100644
--- a/components/loader/Loader.tsx
+++ b/components/loader/Loader.tsx
@@ -7,7 +7,6 @@ const WIDTH = {
     medium: '80',
     big: '200'
 };
-
 const CLASSES_ORBIT1 = {
     small: 'loadingAnimation-circle--smaller loadingAnimation-orbit1--smaller',
     medium: 'loadingAnimation-orbit1',
@@ -19,14 +18,11 @@ const CLASSES_ORBIT2 = {
     big: 'loadingAnimation-orbit2'
 };
 
-
-
 interface Props {
     size?: 'small' | 'medium' | 'big';
     bgColor?: string;
 }
 
-
 const Loader = ({ size = 'small', bgColor = '' }: Props) => {
     const diameter = size !== 'small' ? '100' : '10';
     const radius = size !== 'small' ? '80' : '8';

From 5da822d61ef5405206bb80f81651e3998109e9c4 Mon Sep 17 00:00:00 2001
From: mmso <mmso@mmso.se>
Date: Mon, 27 Jan 2020 18:28:18 +0100
Subject: [PATCH 3/5] Re-use full loader

---
 components/loader/FullLoader.js  | 42 -----------------------
 components/loader/FullLoader.tsx | 57 ++++++++++++++++++++++++++++++++
 components/loader/Loader.tsx     | 53 +++++------------------------
 3 files changed, 65 insertions(+), 87 deletions(-)
 delete mode 100644 components/loader/FullLoader.js
 create mode 100644 components/loader/FullLoader.tsx

diff --git a/components/loader/FullLoader.js b/components/loader/FullLoader.js
deleted file mode 100644
index 92b786812..000000000
--- a/components/loader/FullLoader.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { classnames } from '../../helpers/component';
-
-const FullLoader = ({ size = 50, color, className }) => {
-    const smaller = size < 50;
-    return (
-        <svg className={classnames(['loadingAnimation', className])} viewBox="0 0 200 200" width={size} height={size}>
-            <circle
-                cx="100"
-                cy="100"
-                r="80"
-                className={classnames([
-                    'loadingAnimation-circle',
-                    smaller ? 'loadingAnimation-orbit1--smaller' : 'loadingAnimation-orbit1',
-                    smaller && 'loadingAnimation-circle--smaller',
-                    color && `loadingAnimation-circle--${color}`
-                ])}
-            />
-            <circle
-                cx="100"
-                cy="100"
-                r="80"
-                className={classnames([
-                    'loadingAnimation-circle',
-                    smaller ? 'loadingAnimation-orbit2--smaller' : 'loadingAnimation-orbit2',
-                    smaller && 'loadingAnimation-circle--smaller',
-                    color && `loadingAnimation-circle--${color}`
-                ])}
-            />
-        </svg>
-    );
-};
-
-FullLoader.propTypes = {
-    size: PropTypes.number,
-    color: PropTypes.string,
-    className: PropTypes.string
-};
-
-export default FullLoader;
diff --git a/components/loader/FullLoader.tsx b/components/loader/FullLoader.tsx
new file mode 100644
index 000000000..f0a9070fc
--- /dev/null
+++ b/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 smaller = size < 50;
+
+    const diameter = smaller ? 10 : 100;
+    const radius = smaller ? 8 : 80;
+    const viewBox = smaller ? '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',
+                        smaller ? 'loadingAnimation-orbit1--smaller' : 'loadingAnimation-orbit1',
+                        smaller && 'loadingAnimation-circle--smaller',
+                        color && `loadingAnimation-circle--${color}`
+                    ])}
+                />
+                <circle
+                    cx={diameter}
+                    cy={diameter}
+                    r={radius}
+                    className={classnames([
+                        'loadingAnimation-circle',
+                        smaller ? 'loadingAnimation-orbit2--smaller' : 'loadingAnimation-orbit2',
+                        smaller && 'loadingAnimation-circle--smaller',
+                        color && `loadingAnimation-circle--${color}`
+                    ])}
+                />
+            </svg>
+            <span className="sr-only">{c('Info').t`Loading`}</span>
+        </>
+    );
+};
+
+export default FullLoader;
diff --git a/components/loader/Loader.tsx b/components/loader/Loader.tsx
index ceaed8777..d02565b85 100644
--- a/components/loader/Loader.tsx
+++ b/components/loader/Loader.tsx
@@ -1,58 +1,21 @@
 import React from 'react';
-import { c } from 'ttag';
-import { classnames } from '../../helpers/component';
+import FullLoader from './FullLoader';
 
-const WIDTH = {
-    small: '20',
-    medium: '80',
-    big: '200'
-};
-const CLASSES_ORBIT1 = {
-    small: 'loadingAnimation-circle--smaller loadingAnimation-orbit1--smaller',
-    medium: 'loadingAnimation-orbit1',
-    big: 'loadingAnimation-orbit1'
-};
-const CLASSES_ORBIT2 = {
-    small: 'loadingAnimation-circle--smaller loadingAnimation-orbit2--smaller',
-    medium: 'loadingAnimation-orbit2',
-    big: 'loadingAnimation-orbit2'
+const SIZE = {
+    small: 20,
+    medium: 80,
+    big: 200
 };
 
 interface Props {
     size?: 'small' | 'medium' | 'big';
-    bgColor?: string;
+    color?: string;
 }
 
-const Loader = ({ size = 'small', bgColor = '' }: Props) => {
-    const diameter = size !== 'small' ? '100' : '10';
-    const radius = size !== 'small' ? '80' : '8';
-
-    const classNameOrbit = [ 'loadingAnimation-circle ', bgColor === 'primary' && 'loadingAnimation-circle--pm-primary' ];
-    const classNameOrbit1 = classnames([ ...classNameOrbit, CLASSES_ORBIT1[size] ]);
-    const classNameOrbit2 = classnames([ ...classNameOrbit, CLASSES_ORBIT2[size] ]);
-
+const Loader = ({ size = 'small', color = '' }: Props) => {
     return (
         <div className="center flex mb2 mt2">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                className="loadingAnimation mauto"
-                role="img"
-                aria-hidden="true"
-                focusable="false"
-                viewBox={ size !== 'small' ? '0 0 200 200' : '0 0 20 20' }
-                width={WIDTH[size]}
-                height={WIDTH[size]}>
-                <circle
-                    cx={diameter}
-                    cy={diameter}
-                    r={radius}
-                    className={classNameOrbit1} />
-                <circle
-                    cx={diameter}
-                    cy={diameter}
-                    r={radius}
-                    className={classNameOrbit2} />
-            </svg>
-            <span className="sr-only">{c('Info').t`Loading`}</span>
+            <FullLoader size={SIZE[size]} color={color} />
         </div>
     );
 };

From 58986e07a750f6d2569daf982c347cd3211c4c38 Mon Sep 17 00:00:00 2001
From: mmso <mmso@mmso.se>
Date: Mon, 27 Jan 2020 18:30:11 +0100
Subject: [PATCH 4/5] Missing mauto

---
 components/loader/Loader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/loader/Loader.tsx b/components/loader/Loader.tsx
index d02565b85..b641466e7 100644
--- a/components/loader/Loader.tsx
+++ b/components/loader/Loader.tsx
@@ -15,7 +15,7 @@ interface Props {
 const Loader = ({ size = 'small', color = '' }: Props) => {
     return (
         <div className="center flex mb2 mt2">
-            <FullLoader size={SIZE[size]} color={color} />
+            <FullLoader size={SIZE[size]} color={color} className="mauto" />
         </div>
     );
 };

From df8a754ab69d450e5b7ba8066174698854455d0c Mon Sep 17 00:00:00 2001
From: mmso <mmso@mmso.se>
Date: Mon, 27 Jan 2020 18:30:52 +0100
Subject: [PATCH 5/5] Naming

---
 components/loader/FullLoader.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/loader/FullLoader.tsx b/components/loader/FullLoader.tsx
index f0a9070fc..67c13dc7a 100644
--- a/components/loader/FullLoader.tsx
+++ b/components/loader/FullLoader.tsx
@@ -9,11 +9,11 @@ interface Props {
     className?: string;
 }
 const FullLoader = ({ size = 50, color, className }: Props) => {
-    const smaller = size < 50;
+    const isSmall = size < 50;
 
-    const diameter = smaller ? 10 : 100;
-    const radius = smaller ? 8 : 80;
-    const viewBox = smaller ? '0 0 20 20' : '0 0 200 200';
+    const diameter = isSmall ? 10 : 100;
+    const radius = isSmall ? 8 : 80;
+    const viewBox = isSmall ? '0 0 20 20' : '0 0 200 200';
 
     return (
         <>
@@ -32,8 +32,8 @@ const FullLoader = ({ size = 50, color, className }: Props) => {
                     r={radius}
                     className={classnames([
                         'loadingAnimation-circle',
-                        smaller ? 'loadingAnimation-orbit1--smaller' : 'loadingAnimation-orbit1',
-                        smaller && 'loadingAnimation-circle--smaller',
+                        isSmall ? 'loadingAnimation-orbit1--smaller' : 'loadingAnimation-orbit1',
+                        isSmall && 'loadingAnimation-circle--smaller',
                         color && `loadingAnimation-circle--${color}`
                     ])}
                 />
@@ -43,8 +43,8 @@ const FullLoader = ({ size = 50, color, className }: Props) => {
                     r={radius}
                     className={classnames([
                         'loadingAnimation-circle',
-                        smaller ? 'loadingAnimation-orbit2--smaller' : 'loadingAnimation-orbit2',
-                        smaller && 'loadingAnimation-circle--smaller',
+                        isSmall ? 'loadingAnimation-orbit2--smaller' : 'loadingAnimation-orbit2',
+                        isSmall && 'loadingAnimation-circle--smaller',
                         color && `loadingAnimation-circle--${color}`
                     ])}
                 />