Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(spinner): remove spinner and use progress
  • Loading branch information
h13i32maru committed Sep 9, 2018
1 parent fadc7eb commit 856a8f6
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 13 deletions.
5 changes: 2 additions & 3 deletions src/Electron/Component/AccountComponent.js
Expand Up @@ -55,8 +55,7 @@ export default class AccountComponent extends React.Component {

async _switchConfig(index) {
// hack: dom
const splash = document.querySelector('#splash');
splash.style.display = null;
document.body.style.opacity = '0.3';

this.setState({activeIndex: index});

Expand All @@ -70,7 +69,7 @@ export default class AccountComponent extends React.Component {
SystemStreamEmitter.emitRestartAllStreams();

await Timer.sleep(100);
splash.style.display = 'none';
document.body.style.opacity = '1';

GA.eventAccountSwitch();
}
Expand Down
2 changes: 0 additions & 2 deletions src/Electron/Component/BrowserViewComponent.js
Expand Up @@ -655,8 +655,6 @@ export default class WebViewComponent extends React.Component {
</div>
</div>

<iframe className={`spin ${this.state.classNameLoading}`} src="./spin_medium.html"></iframe>

<div className={selectBrowserClassName()}>
<div>
<div>Please select the browser to use when you read the issue.</div>
Expand Down
4 changes: 0 additions & 4 deletions src/Electron/Component/IssuesComponent.js
Expand Up @@ -151,9 +151,7 @@ export default class IssuesComponent extends React.Component {
this._nowLoadingIssues = true;

// hack: DOM operation
const spinner = ReactDOM.findDOMNode(this).querySelector('#issuesSpinner');
const list = ReactDOM.findDOMNode(this).querySelector('#issuesList');
spinner.style.display = 'block';
list.style.opacity = 0.3;

let filterSelectionQuery;
Expand Down Expand Up @@ -206,7 +204,6 @@ export default class IssuesComponent extends React.Component {
});

// hack: DOM operation
spinner.style.display = 'none';
list.style.opacity = null;

this._nowLoadingIssues = false;
Expand Down Expand Up @@ -823,7 +820,6 @@ export default class IssuesComponent extends React.Component {
const rightPager = this._hasNextPage === true ? 'active' : 'deactive';

return <div className="issues">
<div className="issues-spinner" id="issuesSpinner" style={{display: 'none'}}><iframe src="./spin.html"></iframe></div>
<div className="progress-bar" id="issuesProgress" style={{display: 'none'}}><span></span></div>
<ul className="list-group" id="issuesList">
<li className="list-group-header">
Expand Down
32 changes: 28 additions & 4 deletions src/Electron/html/index.html
Expand Up @@ -18,10 +18,31 @@
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
height: 4px;
width: 200px;
border: none;
background: rgba(255,255,255,0.5);
margin: auto;
}

#bar {
width: 0;
height: 4px;
border-radius: 2px;
background: rgba(17, 108, 214, 0.8);
animation: progress 1s ease-in forwards;
}

@keyframes progress {
0% {
width: 0;
}

100% {
width: 100%;
}
}
</style>
<style id="theme-main"></style>
Expand All @@ -43,7 +64,10 @@

require('../Component/AppComponent.js');

document.querySelector('#splash').style.display = 'none';
{
const splash = document.querySelector('#splash');
splash.parentNode.removeChild(splash);
}

location.hash = 'service-already';
}
Expand All @@ -65,6 +89,6 @@
<body>
<div id="app"></div>

<iframe src="splash.html" id="splash"></iframe>
<div id="splash"><div id='bar'></div></div>
</body>
</html>

0 comments on commit 856a8f6

Please sign in to comment.