Skip to content

Commit 856a8f6

Browse files
committed
fix(spinner): remove spinner and use progress
1 parent fadc7eb commit 856a8f6

File tree

4 files changed

+30
-13
lines changed

4 files changed

+30
-13
lines changed

Diff for: src/Electron/Component/AccountComponent.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,7 @@ export default class AccountComponent extends React.Component {
5555

5656
async _switchConfig(index) {
5757
// hack: dom
58-
const splash = document.querySelector('#splash');
59-
splash.style.display = null;
58+
document.body.style.opacity = '0.3';
6059

6160
this.setState({activeIndex: index});
6261

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

7271
await Timer.sleep(100);
73-
splash.style.display = 'none';
72+
document.body.style.opacity = '1';
7473

7574
GA.eventAccountSwitch();
7675
}

Diff for: src/Electron/Component/BrowserViewComponent.js

-2
Original file line numberDiff line numberDiff line change
@@ -655,8 +655,6 @@ export default class WebViewComponent extends React.Component {
655655
</div>
656656
</div>
657657

658-
<iframe className={`spin ${this.state.classNameLoading}`} src="./spin_medium.html"></iframe>
659-
660658
<div className={selectBrowserClassName()}>
661659
<div>
662660
<div>Please select the browser to use when you read the issue.</div>

Diff for: src/Electron/Component/IssuesComponent.js

-4
Original file line numberDiff line numberDiff line change
@@ -151,9 +151,7 @@ export default class IssuesComponent extends React.Component {
151151
this._nowLoadingIssues = true;
152152

153153
// hack: DOM operation
154-
const spinner = ReactDOM.findDOMNode(this).querySelector('#issuesSpinner');
155154
const list = ReactDOM.findDOMNode(this).querySelector('#issuesList');
156-
spinner.style.display = 'block';
157155
list.style.opacity = 0.3;
158156

159157
let filterSelectionQuery;
@@ -206,7 +204,6 @@ export default class IssuesComponent extends React.Component {
206204
});
207205

208206
// hack: DOM operation
209-
spinner.style.display = 'none';
210207
list.style.opacity = null;
211208

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

825822
return <div className="issues">
826-
<div className="issues-spinner" id="issuesSpinner" style={{display: 'none'}}><iframe src="./spin.html"></iframe></div>
827823
<div className="progress-bar" id="issuesProgress" style={{display: 'none'}}><span></span></div>
828824
<ul className="list-group" id="issuesList">
829825
<li className="list-group-header">

Diff for: src/Electron/html/index.html

+28-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,31 @@
1818
position: absolute;
1919
top: 0;
2020
left: 0;
21-
width: 100%;
22-
height: 100%;
21+
bottom: 0;
22+
right: 0;
23+
height: 4px;
24+
width: 200px;
2325
border: none;
2426
background: rgba(255,255,255,0.5);
27+
margin: auto;
28+
}
29+
30+
#bar {
31+
width: 0;
32+
height: 4px;
33+
border-radius: 2px;
34+
background: rgba(17, 108, 214, 0.8);
35+
animation: progress 1s ease-in forwards;
36+
}
37+
38+
@keyframes progress {
39+
0% {
40+
width: 0;
41+
}
42+
43+
100% {
44+
width: 100%;
45+
}
2546
}
2647
</style>
2748
<style id="theme-main"></style>
@@ -43,7 +64,10 @@
4364

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

46-
document.querySelector('#splash').style.display = 'none';
67+
{
68+
const splash = document.querySelector('#splash');
69+
splash.parentNode.removeChild(splash);
70+
}
4771

4872
location.hash = 'service-already';
4973
}
@@ -65,6 +89,6 @@
6589
<body>
6690
<div id="app"></div>
6791

68-
<iframe src="splash.html" id="splash"></iframe>
92+
<div id="splash"><div id='bar'></div></div>
6993
</body>
7094
</html>

0 commit comments

Comments
 (0)