Refactorize "Loader" component

- Change folder name from "LoaderCircle" to "Loader"

src/js/components/Loader/index.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import PropTypes from 'prop-types';
+import P from 'components/Paragraph';
+import colors from 'config/colors';
+
+const Wrapper = styled.div`
+    position: relative;
+    width: ${props => `${props.size}px`};
+    height: ${props => `${props.size}px`};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const SvgWrapper = styled.svg`
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    animation: rotate 2s linear infinite;
+    transform-origin: center center;
+`;
+
+const animationDash = keyframes`
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+`;
+
+const animationColor = keyframes`
+    100%, 0% {
+        stroke: ${colors.GREEN_PRIMARY};
+    }
+    40% {
+        stroke: ${colors.GREEN_PRIMARY};
+    }
+    66% {
+        stroke: ${colors.GREEN_SECONDARY};
+    }
+    80%, 90% {
+        stroke: ${colors.GREEN_TERTIARY};
+    }
+`;
+
+const CircleWrapper = styled.circle`
+    ${props => props.isRoute && css`
+        stroke: ${colors.GRAY_LIGHT};
+    `}
+
+    ${props => props.isPath && css`
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+        animation: ${animationDash} 1.5s ease-in-out infinite, ${animationColor} 6s ease-in-out infinite;
+        stroke-linecap: round;
+    `};
+`;
+
+const Loader = ({
+    className, text, size = 100,
+}) => (
+    <Wrapper
+        className={className}
+        size={size}
+    >
+        <P>{text}</P>
+        <SvgWrapper viewBox="25 25 50 50">
+            <CircleWrapper
+                cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+                stroke=""
+                strokeWidth="1"
+                strokeMiterlimit="10"
+                isRoute
+            />
+            <CircleWrapper
+                cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+                strokeWidth="1"
+                strokeMiterlimit="10"
+                isPath
+            />
+        </SvgWrapper>
+    </Wrapper>
+);
+
+Loader.propTypes = {
+    className: PropTypes.string,
+    text: PropTypes.string,
+    size: PropTypes.number,
+};
+
+export default Loader;

src/js/components/LoaderCircle/index.js

@@ -1,21 +0,0 @@
-/* @flow */
-
-import React from 'react';
-
-export default (props: { size: string, label?: string, className?: string }): React$Element<string> => {
-    const className = props.className ? `loader-circle ${props.className}` : 'loader-circle';
-    const style = {
-        width: `${props.size}px`,
-        height: `${props.size}px`,
-    };
-
-    return (
-        <div className={className} style={style}>
-            <p>{ props.label }</p>
-            <svg className="circular" viewBox="25 25 50 50">
-                <circle className="route" cx="50" cy="50" r="20" fill="none" stroke="" strokeWidth="1" strokeMiterlimit="10" />
-                <circle className="path" cx="50" cy="50" r="20" fill="none" strokeWidth="1" strokeMiterlimit="10" />
-            </svg>
-        </div>
-    );
-};

src/js/components/Notification/index.js

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import * as NOTIFICATION from 'actions/constants/notification';
 import * as NotificationActions from 'actions/NotificationActions';
 import type { Action, State, Dispatch } from 'flowtype';
-import Loader from 'components/LoaderCircle';
+import Loader from 'components/Loader';
 
 type Props = {
     notifications: $ElementType<State, 'notifications'>,
@@ -53,8 +53,7 @@ export const Notification = (props: NProps): React$Element<string> => {
             ) : null }
             { props.loading ? (
                 <Loader
-                    className="info"
-                    size="50"
+                    size={50}
                 />
             ) : null }
 

src/js/components/modal/RememberDevice.js

@@ -2,7 +2,7 @@
 
 
 import React, { Component } from 'react';
-import Loader from 'components/LoaderCircle';
+import Loader from 'components/Loader';
 
 import type { Props } from './index';
 
@@ -89,7 +89,7 @@ export default class RememberDevice extends Component<Props, State> {
             <div className="remember">
                 <h3>Forget {label}?</h3>
                 <p>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</p>
-                <button onClick={event => this.forget()}><span>Forget <Loader size="28" label={this.state.countdown.toString()} /></span></button>
+                <button onClick={event => this.forget()}><span>Forget <Loader size={28} text={this.state.countdown.toString()} /></span></button>
                 <button className="white" onClick={event => onRememberDevice(device)}>Remember</button>
             </div>
         );

src/js/views/Landing/components/InstallBridge/index.js

@@ -8,7 +8,7 @@ import installers from 'constants/bridge';
 import Select from 'components/Select';
 import Link from 'components/Link';
 import Button from 'components/Button';
-import Loader from 'components/LoaderCircle';
+import Loader from 'components/Loader';
 import P from 'components/Paragraph';
 import ICONS from 'config/icons';
 
@@ -128,7 +128,7 @@ export default class InstallBridge extends Component<Props, State> {
 
     render() {
         if (!this.state.target) {
-            return <Loader label="Loading" size="100" />;
+            return <Loader text="Loading" size={100} />;
         }
         const { label } = this.state.target;
         const url = `${this.state.url}${this.state.target.value}`;

src/js/views/Landing/index.js

@@ -6,7 +6,7 @@ import Header from 'components/Header';
 import Footer from 'components/Footer';
 import Log from 'components/Log';
 import Link from 'components/Link';
-import Loader from 'components/LoaderCircle';
+import Loader from 'components/Loader';
 import Notifications, { Notification } from 'components/Notification';
 import colors from 'config/colors';
 import P from 'components/Paragraph';
@@ -82,7 +82,7 @@ export default (props: Props) => {
 
     return (
         <LandingWrapper>
-            {isLoading && <LandingLoader label="Loading" size="100" />}
+            {isLoading && <LandingLoader text="Loading" size={100} />}
             {!isLoading && (
                 <React.Fragment>
                     <Header />
@@ -98,8 +98,7 @@ export default (props: Props) => {
 
                     <LandingContent>
 
-                        <InstallBridge browserState={browserState} />
-                        {/* {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
+                        {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
                         {shouldShowInstallBridge && <InstallBridge browserState={browserState} />}
 
                         {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (
@@ -147,7 +146,7 @@ export default (props: Props) => {
                                     </LandingFooterWrapper>
                                 )}
                             </div>
-                        )} */}
+                        )}
                     </LandingContent>
 
                     <Footer />

src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import BigNumber from 'bignumber.js';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
-import Loader from 'components/LoaderCircle';
+import Loader from 'components/Loader';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import * as stateUtils from 'reducers/utils';
@@ -179,7 +179,7 @@ const DiscoveryLoadingText = styled.span`
 const RowDiscoveryLoading = (() => (
     <Row>
         <DiscoveryLoadingWrapper>
-            <Loader size="20" />
+            <Loader size={20} />
             <DiscoveryLoadingText>
                 Loading...
             </DiscoveryLoadingText>