Fixed animation loading

src/js/components/DeviceHeader/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
@@ -82,38 +82,54 @@ const Dot = styled.div`
     height: 10px;
 `;
 
-const DeviceHeader = ({
-    disabled = false,
-    handleOpen,
-    status,
-    label,
-    deviceCount,
-    isOpen = false,
-    trezorModel,
-}) => (
-    <Wrapper>
-        <ClickWrapper onClick={!disabled ? handleOpen : null}>
-            <ImageWrapper>
-                <Dot color={getStatusColor(status)} />
-                <TrezorImage status={status} model={trezorModel} />
-            </ImageWrapper>
-            <LabelWrapper>
-                <Name>{label}</Name>
-                <Status>{getStatusName(status)}</Status>
-            </LabelWrapper>
-            <IconWrapper>
-                {deviceCount > 1 && <Counter>{deviceCount}</Counter>}
-                <Icon
-                    isOpen={isOpen}
-                    size={25}
-                    color={colors.TEXT_SECONDARY}
-                    icon={icons.ARROW_DOWN}
-                    rotateOnActive
-                />
-            </IconWrapper>
-        </ClickWrapper>
-    </Wrapper>
-);
+class DeviceHeader extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            clicked: false,
+        };
+    }
+
+    handleClick() {
+        this.setState({ clicked: true });
+        if (!this.props.disabled) {
+            this.props.handleOpen();
+        }
+    }
+
+    render() {
+        console.log('cananitem', this.state.clicked);
+        const {
+            status, label, deviceCount, isOpen, trezorModel,
+        } = this.props;
+        return (
+            <Wrapper>
+                <ClickWrapper onClick={() => this.handleClick()}>
+                    <ImageWrapper>
+                        <Dot color={getStatusColor(status)} />
+                        <TrezorImage status={status} model={trezorModel} />
+                    </ImageWrapper>
+                    <LabelWrapper>
+                        <Name>{label}</Name>
+                        <Status>{getStatusName(status)}</Status>
+                    </LabelWrapper>
+                    <IconWrapper>
+                        {deviceCount > 1 && <Counter>{deviceCount}</Counter>}
+                        <Icon
+                            canAnimate={this.state.clicked === true}
+                            isActive={isOpen}
+                            size={25}
+                            color={colors.TEXT_SECONDARY}
+                            icon={icons.ARROW_DOWN}
+                            rotateOnActive
+                        />
+                    </IconWrapper>
+                </ClickWrapper>
+            </Wrapper>
+        );
+    }
+}
+
 
 DeviceHeader.propTypes = {
     deviceCount: PropTypes.number,

src/js/components/Icon/index.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 const rotate180up = keyframes`
     from {
         transform: rotate(0deg);
     }
-
     to {
         transform: rotate(180deg);
     }
@@ -16,50 +15,41 @@ const rotate180down = keyframes`
     from {
         transform: rotate(180deg);
     }
-
     to {
         transform: rotate(0deg);
     }
 `;
 
 const SvgWrapper = styled.svg`
-    animation: ${props => (props.isActive ? rotate180up : rotate180down)} 0.2s linear 1 forwards;
+    animation: ${props => (props.canAnimate ? (props.isActive ? rotate180up : rotate180down) : null)} 0.2s linear 1 forwards;
 `;
 
 const Path = styled.path``;
 
 const Icon = ({
-    icon, size = 32, color = 'black', isActive = false,
-}) => {
-    const styles = {
-        svg: {
+    icon, size = 32, color = 'black', isActive, canAnimate,
+}) => (
+    <SvgWrapper
+        canAnimate={canAnimate}
+        isActive={isActive}
+        style={{
             display: 'inline-block',
             verticalAlign: 'middle',
-        },
-        path: {
-            fill: color,
-        },
-    };
-
-    return (
-        <SvgWrapper
-            isOpen={isOpen}
-            style={styles.svg}
-            width={`${size}`}
-            height={`${size}`}
-            viewBox="0 0 1024 1024"
-        >
-            <Path
-                isActive={isActive}
-                style={styles.path}
-                d={icon}
-
-            />
-        </SvgWrapper>
-    );
-};
+        }}
+        width={`${size}`}
+        height={`${size}`}
+        viewBox="0 0 1024 1024"
+    >
+        <Path
+            isActive={isActive}
+            style={{ fill: color }}
+            d={icon}
+        />
+    </SvgWrapper>
+);
 
 Icon.propTypes = {
+    canAnimate: PropTypes.bool,
     icon: PropTypes.string.isRequired,
     size: PropTypes.number,
     isActive: PropTypes.bool,

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

@@ -64,7 +64,7 @@ export const DeviceSelect = (props: Props) => {
                 handleOpen={handleOpen}
                 label={selected.instanceLabel}
                 status={getStatus(selected)}
-                deviceCount={deviceCount}
+                deviceCount={devices.length}
                 isOpen={props.deviceDropdownOpened}
                 trezorModel={getVersion(selected)}
             />