Merge pull request RocketChat#311 from alexbrazier/feature/loading

Added loading screen before load

Author: rodrigok

src/public/app.html

@@ -29,7 +29,12 @@
 					<img src="./images/logo.svg" />
 				</a>
 			</header>
-			<form id="login-card" method="/">
+			<div class="loading-animation" id="loading">
+				<div class="bounce1"></div>
+				<div class="bounce2"></div>
+				<div class="bounce3"></div>
+			</div>
+			<form id="login-card" method="/" style="display:none;">
 				<header>
 					<h2>Enter your server URL</h2>
 				</header>
@@ -49,7 +54,7 @@ <h2>Enter your server URL</h2>
 					<input type="submit" data-loading-text="Connecting..." class="button primary login" value="Connect"></input>
 				</div>
 			</form>
-			<footer>
+			<footer style="display:none;">
 				<div class="social">
 					<nav>
 						<a target="_system" class="button share twitter" href="https://twitter.com/RocketChatApp"><i class="icon-twitter"></i><span>Twitter</span></a>

src/scripts/servers.js

@@ -190,6 +190,7 @@ class Servers extends EventEmitter {
             this.emit('active-setted', hostUrl);
             return true;
         }
+        this.emit('loaded');
         return false;
     }
 

src/scripts/webview.js

@@ -28,6 +28,19 @@ class WebView extends EventEmitter {
         servers.on('active-cleared', (hostUrl) => {
             this.deactiveAll(hostUrl);
         });
+
+        servers.once('loaded', () => {
+            this.loaded();
+        });
+    }
+
+    loaded () {
+        var loading = document.querySelector('#loading');
+        var form = document.querySelector('#login-card');
+        var footer = document.querySelector('footer');
+        loading.style.display = 'none';
+        form.style.display = 'block';
+        footer.style.display = 'block';
     }
 
     add (host) {
@@ -68,6 +81,7 @@ class WebView extends EventEmitter {
 
         webviewObj.addEventListener('dom-ready', () => {
             this.emit('dom-ready', host.url);
+            this.loaded();
         });
 
         // Open external app on clicked link. e.g. mailto:, tel:, etc...

src/stylesheets/main.less

@@ -3,6 +3,7 @@
 @import "start-page.less";
 @import "../branding/branding.less";
 @import "fontello.less";
+@import "utils/_loading.import.less";
 
 *,
 *:before,

src/stylesheets/utils/_loading.import.less

@@ -0,0 +1,53 @@
+.loading-animation {
+	color: @secondary-font-color;
+	font-size: 1.3rem;
+	margin-left: 32px;
+	margin-top: 12px;
+	margin-bottom: 5px;
+}
+
+.loading-animation > div {
+	width: 8px;
+	height: 8px;
+	border-radius: 100%;
+	display: inline-block;
+	background-color: @secondary-font-color;
+	-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.loading-animation .bounce1 {
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+
+.loading-animation .bounce2 {
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+
+@-webkit-keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		-webkit-transform: scale(0);
+	}
+
+	40% {
+		-webkit-transform: scale(1);
+	}
+}
+
+@keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+	}
+
+	40% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}