feat(docs): add "Loading..." notification

docs/src/templates/docs.css

@@ -74,6 +74,31 @@ li {
 
 /*----- Global Layout -----*/
 
+#loading {
+  position: fixed;
+  left: 50%;
+  margin: 1.5em -40px;
+  width: 80px;
+  padding: 0.2em 0.2em;
+  text-align: center;
+  font-weight: bold;
+  font-size: 13px;
+  color: #FFFFFF;
+  border: 1px solid black;
+  background-color: #7989D6;
+
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+
+  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.6);
+  -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.6);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
+
+  z-index: 2; /* just below #fader */
+}
+
+
 #container  {
     width: 1150px;
     margin: 0 auto;

docs/src/templates/docs.js

@@ -13,6 +13,7 @@ function DocsController($location, $browser, $window, $cookies) {
   scope.subpage = false;
   scope.offlineEnabled = ($cookies[OFFLINE_COOKIE_NAME] == angular.version.full);
   scope.futurePartialTitle = null;
+  scope.loading = 0;
 
   if (!$location.path() || INDEX_PATH.test($location.path())) {
     $location.path('/api').replace();
@@ -25,6 +26,7 @@ function DocsController($location, $browser, $window, $cookies) {
       scope.sectionId = parts[1];
       scope.partialId = parts[2] || 'index';
       scope.pages = angular.Array.filter(NG_PAGES, {section: scope.sectionId});
+      scope.loading++;
 
       var i = scope.pages.length;
       while (i--) {
@@ -69,6 +71,7 @@ function DocsController($location, $browser, $window, $cookies) {
   };
 
   scope.afterPartialLoaded = function() {
+    scope.loading--;
     scope.partialTitle = scope.futurePartialTitle;
     SyntaxHighlighter.highlight();
     $window.scrollTo(0,0);

docs/src/templates/index.html

@@ -111,6 +111,8 @@
       </ul>
     </div>
 
+    <div id="loading" ng:show="loading">Loading...</div>
+
 
     <div id="content-panel">
       <h2 ng:bind="partialTitle"></h2>