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,17 +82,29 @@ const Dot = styled.div`
     height: 10px;
 `;
 
-const DeviceHeader = ({
-    disabled = false,
-    handleOpen,
-    status,
-    label,
-    deviceCount,
-    isOpen = false,
-    trezorModel,
-}) => (
+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={!disabled ? handleOpen : null}>
+                <ClickWrapper onClick={() => this.handleClick()}>
                     <ImageWrapper>
                         <Dot color={getStatusColor(status)} />
                         <TrezorImage status={status} model={trezorModel} />
@@ -104,7 +116,8 @@ const DeviceHeader = ({
                     <IconWrapper>
                         {deviceCount > 1 && <Counter>{deviceCount}</Counter>}
                         <Icon
-                    isOpen={isOpen}
+                            canAnimate={this.state.clicked === true}
+                            isActive={isOpen}
                             size={25}
                             color={colors.TEXT_SECONDARY}
                             icon={icons.ARROW_DOWN}
@@ -113,7 +126,10 @@ const DeviceHeader = ({
                     </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}
+            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)}
             />