Closes #800; Add loading before main page render and add Fast Render

RocketChat · Feb 24, 2016 · 47fdaba · 47fdaba
1 parent b7c0ea0
commit 47fdaba
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 2 deletions.
diff --git a/.meteor/versions b/.meteor/versions
@@ -23,6 +23,7 @@ callback-hook@1.0.4
 cfs:http-methods@0.0.30
 check@1.1.0
 chrismbeckett:toastr@2.1.2_1
+chuangbo:cookie@1.1.0
 coffeescript@1.0.11
 cosmos:browserify@0.9.4
 dandv:caret-position@2.1.1
@@ -78,6 +79,10 @@ mdg:validation-error@0.4.0
 meteor@1.1.10
 meteor-base@1.0.1
 meteor-developer@1.1.5
+meteorhacks:fast-render@2.10.0
+meteorhacks:inject-data@1.4.1
+meteorhacks:inject-initial@1.0.3
+meteorhacks:picker@1.0.3
 meteorspark:util@0.2.0
 minifiers@1.1.7
 minimongo@1.0.10

diff --git a/packages/rocketchat-cors/cors.coffee b/packages/rocketchat-cors/cors.coffee
@@ -28,7 +28,8 @@ WebApp.rawConnectHandlers.use (req, res, next) ->
 
 
 WebApp.rawConnectHandlers.use (req, res, next) ->
-	res.setHeader("Access-Control-Allow-Origin", "*")
+	if /^\/(api|_timesync|sockjs)(\/|$)/.test req.url
+		res.setHeader("Access-Control-Allow-Origin", "*")
 
 	# Block next handlers to override CORS with value http://meteor.local
 	setHeader = res.setHeader

diff --git a/packages/rocketchat-theme/assets/stylesheets/base.less b/packages/rocketchat-theme/assets/stylesheets/base.less
@@ -4461,3 +4461,69 @@ a.github-fork {
 .powered-by {
 	margin-top: 1em;
 }
+
+.page-loading {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,.5);
+	z-index: 1000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.spinner {
+		margin: 10px auto;
+		width: 50px;
+		height: 40px;
+		text-align: center;
+		font-size: 10px;
+	}
+
+	.spinner > div {
+		background-color: #fff;
+		height: 100%;
+		width: 6px;
+		display: inline-block;
+
+		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+		animation: sk-stretchdelay 1.2s infinite ease-in-out;
+	}
+
+	.spinner .rect2 {
+		-webkit-animation-delay: -1.1s;
+		animation-delay: -1.1s;
+	}
+
+	.spinner .rect3 {
+		-webkit-animation-delay: -1.0s;
+		animation-delay: -1.0s;
+	}
+
+	.spinner .rect4 {
+		-webkit-animation-delay: -0.9s;
+		animation-delay: -0.9s;
+	}
+
+	.spinner .rect5 {
+		-webkit-animation-delay: -0.8s;
+		animation-delay: -0.8s;
+	}
+
+	@-webkit-keyframes sk-stretchdelay {
+		0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+		20% { -webkit-transform: scaleY(1.0) }
+	}
+
+	@keyframes sk-stretchdelay {
+		0%, 40%, 100% {
+			transform: scaleY(0.4);
+			-webkit-transform: scaleY(0.4);
+		}  20% {
+			transform: scaleY(1.0);
+			-webkit-transform: scaleY(1.0);
+		}
+	}
+}
diff --git a/packages/rocketchat-ui-master/master/main.coffee b/packages/rocketchat-ui-master/master/main.coffee
@@ -221,3 +221,5 @@ Template.main.onRendered ->
 		$('html').addClass "rtl"
 	else
 		$('html').removeClass "rtl"
+
+	$('.page-loading').remove()
diff --git a/packages/rocketchat-ui-master/package.js b/packages/rocketchat-ui-master/package.js
@@ -19,7 +19,9 @@ Package.onUse(function(api) {
 		'templating',
 		'coffeescript',
 		'underscore',
-		'rocketchat:lib'
+		'rocketchat:lib',
+		'meteorhacks:inject-initial',
+		'meteorhacks:fast-render'
 	]);
 
 	api.addFiles('master/main.html', 'client');
@@ -28,4 +30,7 @@ Package.onUse(function(api) {
 	api.addFiles('master/logoLayout.html', 'client');
 
 	api.addFiles('master/main.coffee', 'client');
+
+	api.addFiles('server/inject.js', 'server');
+	api.addFiles('server/fastRender.js', 'server');
 });
diff --git a/packages/rocketchat-ui-master/server/fastRender.js b/packages/rocketchat-ui-master/server/fastRender.js
@@ -0,0 +1,4 @@
+FastRender.onAllRoutes(function(path) {
+	this.subscribe('settings');
+	this.subscribe("meteor.loginServiceConfiguration");
+});
diff --git a/packages/rocketchat-ui-master/server/inject.js b/packages/rocketchat-ui-master/server/inject.js
@@ -0,0 +1,10 @@
+Inject.rawBody('page-loading', `
+	<div class="page-loading">
+		<div class="spinner">
+			<div class="rect1"></div>
+			<div class="rect2"></div>
+			<div class="rect3"></div>
+			<div class="rect4"></div>
+			<div class="rect5"></div>
+		</div>
+	</div>`);