Add spinner for Preferences window

Heejin Lee · Heejin Lee · commit 95ddf741c1af · 2016-04-17T17:00:54.000+09:00
diff --git a/app/dist/lib/common.css b/app/dist/lib/common.css
@@ -19,3 +19,46 @@
 ::-webkit-scrollbar-thumb:hover {
     background-color: #aaa;
 }
+
+.spinner {
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  background-color: #00bcd4;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% { 
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% { 
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+
+}
diff --git a/app/dist/preferences.html b/app/dist/preferences.html
@@ -11,10 +11,17 @@
   </style>
 </head>
 <body>
+  <div id="spinner" class="spinner">
+    <div class="bounce1"></div>
+    <div class="bounce2"></div>
+    <div class="bounce3"></div>
+  </div>
   <div id="app"></div>
   <script>
     process.env.NODE_ENV = 'production';
-    require('../renderer/pref.js');
+    setTimeout(() => {
+      require('../renderer/pref.js');
+    }, 200);
   </script>
 </body>
-</html>
+</html>
diff --git a/app/renderer-jsx/pref.jsx b/app/renderer-jsx/pref.jsx
@@ -69,6 +69,7 @@ class Preferences extends React.Component {
       });
     });
     rpc.send('getPrefItems');
+    document.getElementById('spinner').remove();
   }
 
   selectPref(prefId) {

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ class Preferences extends React.Component {`
`69`	`69`	`});`
`70`	`70`	`});`
`71`	`71`	`rpc.send('getPrefItems');`
	`72`	`+ document.getElementById('spinner').remove();`
`72`	`73`	`}`
`73`	`74`
`74`	`75`	`selectPref(prefId) {`