fix(spinner): remove spinner and use progress

jasperapp · Sep 9, 2018 · 856a8f6 · 856a8f6
1 parent fadc7eb
commit 856a8f6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/src/Electron/Component/AccountComponent.js b/src/Electron/Component/AccountComponent.js
@@ -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});
 
@@ -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();
   }

diff --git a/src/Electron/Component/BrowserViewComponent.js b/src/Electron/Component/BrowserViewComponent.js
@@ -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>

diff --git a/src/Electron/Component/IssuesComponent.js b/src/Electron/Component/IssuesComponent.js
@@ -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;
@@ -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;
@@ -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">

diff --git a/src/Electron/html/index.html b/src/Electron/html/index.html
@@ -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>
@@ -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';
     }
@@ -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>