Added loading spinner icon.

Only for loading resolve object from server.

openslides/core/static/css/app.css

@@ -545,6 +545,10 @@ img {
     margin-top: 25px;
 }
 
+.spacer-bottom {
+    margin-bottom: 7px;
+}
+
 .spacer-right {
     margin-right: 5px;
 }

openslides/core/static/js/core/site.js

@@ -432,6 +432,26 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
+.directive('routeLoadingIndicator', [
+    '$rootScope',
+    '$state',
+    function($rootScope, $state) {
+        return {
+            restrict: 'E',
+            template: "<div class='header spacer-bottom' ng-if='isRouteLoading'><div class='title'><h1><translate>Loading ...</translate> <i class='fa fa-spinner fa-pulse'></i></h1></div></div>",
+            link: function(scope, elem, attrs) {
+                scope.isRouteLoading = false;
+                $rootScope.$on('$stateChangeStart', function() {
+                    scope.isRouteLoading = true;
+                });
+                $rootScope.$on('$stateChangeSuccess', function() {
+                    scope.isRouteLoading = false;
+                });
+            }
+        };
+    }
+])
+
 .controller('MainMenuCtrl', [
     '$scope',
     'mainMenu',

openslides/core/static/templates/index.html

@@ -161,7 +161,8 @@
   <div class="containerOS">
     <div class="col1" ng-class="isProjectorSidebar ? 'min' : 'max'">
         <!-- dynamic views -->
-        <div ui-view ng-cloak></div>
+        <route-loading-indicator></route-loading-indicator>
+        <div ui-view ng-if="!isRouteLoading"></div>
         <!-- footer -->
         <div id="footer">
           &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |