Commit 6a82a9cd authored by zeroleak's avatar zeroleak
Browse files

add startup animation

parent 9db64f4e
......@@ -6,6 +6,7 @@ import cliService from '../services/cliService';
import { Alert } from 'react-bootstrap';
import * as Icons from '@fortawesome/free-solid-svg-icons';
import { cliLocalService } from '../services/cliLocalService';
import cyclone from '../img/cyclone.png'
class ConnectingPage extends Component<Props> {
props: Props;
......@@ -19,6 +20,10 @@ class ConnectingPage extends Component<Props> {
}
render() {
if (cliService.isStarting()) {
return this.renderStarting();
}
const cliUrlError = cliService.getCliUrlError() // or undefined
return this.renderConnecting(cliUrlError)
}
......@@ -35,6 +40,16 @@ class ConnectingPage extends Component<Props> {
}
}
renderStarting() {
return (
<form className="form-signin text-center" onSubmit={(e) => {this.onSubmit();e.preventDefault()}}>
<h1 className="h3 mb-3 font-weight-normal">Starting Whirlpool...</h1>
<div><img src={cyclone} className='spin'/></div><br/>
<div>whirlpool-cli @ <strong>{cliService.isCliLocal() ? 'standalone GUI' : cliService.getCliUrl()}</strong></div>
</form>
);
}
renderConnecting(cliUrlError) {
return (
<form className="form-signin text-center" onSubmit={(e) => {this.onSubmit();e.preventDefault()}}>
......@@ -44,7 +59,6 @@ class ConnectingPage extends Component<Props> {
<br/>
{cliService.isCliLocal() && <div>
{cliLocalService.getStatusIcon((icon,text)=><span>{icon} {text}</span>)}<br/>
{(!cliService.isConnected() || cliService.isCliStatusStarting()) && <small className='text-muted'>Might take a minute to start... restart if longer.</small>}<br/>
</div>}
<br/>
......@@ -72,23 +86,6 @@ class ConnectingPage extends Component<Props> {
cliService.resetConfig()
}
}
renderCliUrlError() {
return (
<form className="form-signin text-center" onSubmit={(e) => {this.onSubmit();e.preventDefault()}}>
<h1 className="h3 mb-3 font-weight-normal">Connecting...</h1>
<div><FontAwesomeIcon icon={Icons.faWifi} size='3x' color='#343a40'/></div>
<p>Connecting to whirlpool-cli...<br/>
<strong>{cliService.getCliUrl()}</strong><br/>
{cliService.isCliLocal() && <div>{cliLocalService.getStatusIcon((icon,text)=><span>{icon} {text}<br/>(might take a minute to start... restart if longer)</span>)}</div>}
</p>
</form>
);
}
}
function mapStateToProps(state) {
return {
......
......@@ -209,3 +209,16 @@ code {
overflow: auto;
white-space: pre;
}
@keyframes spinning {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
.spin {
animation-name: spinning;
animation-duration: 1s;
animation-iteration-count: infinite;
/* linear | ease | ease-in | ease-out | ease-in-out */
animation-timing-function: ease-out;
}
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -16,6 +16,7 @@ import { Link } from 'react-router-dom';
import guiConfig from '../mainProcess/guiConfig';
const REFRESH_RATE = 6000;
const STARTUP_DURATION = 15*1000
class CliService {
constructor () {
this.setState = undefined
......@@ -23,6 +24,7 @@ class CliService {
this.refreshTimeout = undefined
this.servicesStarted = false
this.startTime = new Date().getTime()
this.cliUrl = undefined
this.apiKey = undefined
this.cliLocal = undefined
......@@ -164,6 +166,7 @@ class CliService {
}
restart() {
this.startTime = new Date().getTime()
backendService.cli.restart()
// force refresh
......@@ -213,6 +216,10 @@ class CliService {
// state
isStarting() {
return (new Date().getTime() - this.startTime) < STARTUP_DURATION
}
getCliUrlError() {
return this.state ? this.state.cliUrlError : undefined
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment