Add in test loading spinner

services/web/app/views/layout.jade

@@ -37,11 +37,14 @@ html(itemscope, itemtype='http://schema.org/Product')
 		script(src=jsPath+'libs/underscore-1.3.3.js')
 		block scripts
 		
-	- if (typeof(bodyClasses) == "undefined")
+	body
-		- var bodyClasses = []
+		#ng-app(style="display: none;")
-	body(class=bodyClasses)
 			include layout/navbar
 			block content
+			include layout/footer
+		#ng-app-loading
+			i.fa.fa-spin.fa-refresh
+
 		- if (typeof(lookingForScribtex) != "undefined" && lookingForScribtex)
 			.modal.hide#scribtexModal
 				.modal-header
@@ -53,7 +56,6 @@ html(itemscope, itemtype='http://schema.org/Product')
 						a(href="https://scribtex.sharelatex.com#{scribtexPath}", style="font-size: 16px") https://scribtex.sharelatex.com#{scribtexPath}
 				.modal-footer
 					button(data-dismiss="modal").btn OK
-		include layout/footer
 
 		script(type='text/javascript').
 			window.requirejs = {

services/web/public/coffee/app/directives/asyncForm.coffee

@@ -0,0 +1,57 @@
+define [
+	"base"
+], (App) ->
+	App.directive "asyncForm", ($http) ->
+		return {
+			link: (scope, element, attrs) ->
+				formName = attrs.asyncForm
+
+				element.on "submit", (e) ->
+					e.preventDefault()
+
+					formData = {}
+					for data in element.serializeArray()
+						formData[data.name] = data.value
+
+					$http
+						.post(element.attr('action'), formData)
+						.success (data, status, headers, config) ->
+							scope.success = true
+							scope.error = false
+
+							if data.redir?
+								ga('send', 'event', formName, 'success')
+								window.location = data.redir
+							else if data.message?
+								scope.message = data.message
+
+								if data.message.type == "error"
+									scope.success = false
+									scope.error = true
+									ga('send', 'event', formName, 'failure', data.message)
+								else
+									ga('send', 'event', formName, 'success')
+									
+						.error (data, status, headers, config) ->
+							scope.success = false
+							scope.error = true
+							ga('send', 'event', formName, 'failure', data.message)
+							scope.message =
+								text: data.message or "Something went wrong talking to the server :(. Please try again."
+								type: 'error'
+		}
+
+	App.directive "formMessages", () ->
+		return {
+			restrict: "E"
+			template: """
+				<div class="alert" ng-class="{
+					'alert-danger': message.type == 'error',
+					'alert-success': message.type != 'error'
+				}" ng-show="!!message">
+					{{message.text}}
+				</div>
+				<div ng-transclude></div>
+			"""
+			transclude: true
+		}

services/web/public/coffee/app/main.coffee

@@ -3,4 +3,6 @@ define [
 	"user-details"
 	"directives/asyncForm"
 ], () ->
-	angular.bootstrap(document.body, ["SharelatexApp"])
+	angular.bootstrap(document.getElementById("ng-app"), ["SharelatexApp"])
+	$("#ng-app").show()
+	$("#ng-app-loading").hide()

services/web/public/stylesheets/app/base.less

@@ -0,0 +1,6 @@
+#ng-app-loading {
+	position: absolute;
+	top: 45%;
+	width: 100%;
+	text-align: center;
+}

services/web/public/stylesheets/style.less

@@ -52,5 +52,6 @@
 @import "core/responsive-utilities.less";
 
 // ShareLaTeX app classes
+@import "app/base.less";
 @import "app/project-list.less";
 @import "app/editor.less";