arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Show loader after 'Acquire Device' button is clicked

Browse Source
This commit is contained in:
Szymon Lesisz 2018-08-08 11:43:34 +02:00
parent c197f7f7b6
commit 0c5635d356
3 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/js/components/common/LoaderCircle.js
View File

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

9
src/js/components/common/Notification.js
View File

@ -8,6 +8,7 @@ import { connect } from 'react-redux';
import * as NOTIFICATION from '~/js/actions/constants/notification'; import * as NOTIFICATION from '~/js/actions/constants/notification';
import * as NotificationActions from '~/js/actions/NotificationActions'; import * as NotificationActions from '~/js/actions/NotificationActions';
import type { Action, State, Dispatch } from '~/flowtype'; import type { Action, State, Dispatch } from '~/flowtype';
import Loader from './LoaderCircle';
type Props = { type Props = {
notifications: $ElementType<State, 'notifications'>, notifications: $ElementType<State, 'notifications'>,
@ -21,7 +22,8 @@ type NProps = {
title: string; title: string;
message?: string; message?: string;
actions?: Array<any>; actions?: Array<any>;
close?: typeof NotificationActions.close close?: typeof NotificationActions.close,
loading?: boolean
} }
export const Notification = (props: NProps): React$Element<string> => { export const Notification = (props: NProps): React$Element<string> => {
@ -48,6 +50,11 @@ export const Notification = (props: NProps): React$Element<string> => {
{ actionButtons } { actionButtons }
</div> </div>
) : null } ) : null }
{ props.loading ? (
<Loader
className="info"
size="50" />
) : null }
</div> </div>
); );

23
src/styles/loader.less
View File

@ -34,11 +34,11 @@
stroke-linecap: round; stroke-linecap: round;
} }
} }
}
@keyframes rotate { &.info {
100% { .path {
transform: rotate(360deg); animation: dash 1.5s ease-in-out infinite, colorInfo 6s ease-in-out infinite;
}
} }
} }
@ -71,3 +71,18 @@
stroke: @color_green_tertiary; stroke: @color_green_tertiary;
} }
} }
@keyframes colorInfo {
100%, 0% {
stroke: @color_info_primary;
}
40% {
stroke: @color_info_primary;
}
66% {
stroke: @color_info_primary;
}
80%, 90% {
stroke: @color_info_primary;
}
}