diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 146e40b4c8..64112311fe 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -38,8 +38,26 @@
 </head>
 <!-- 3. Display the application -->
 <body>
-
-<my-app>Loading...</my-app>
-
+<style>
+  #loader{
+      margin-top :25%;
+      margin-left :40%;
+      width:300px;
+  }
+  #loader-text{
+      width:300px;
+      white-space: nowrap;
+      text-align: center;
+      position: relative;
+  }
+</style>
+    <my-app>
+        <div id="loader">
+            <div>
+                <div id="loader-spin"  class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
+            </div>
+            <div id="loader-text">Loading Demo Shell..</div>
+        </div>
+    </my-app>
 </body>
 </html>
diff --git a/demo-shell-ng2/systemjs.config.js b/demo-shell-ng2/systemjs.config.js
index 613e77fc1f..bd19dc1a63 100644
--- a/demo-shell-ng2/systemjs.config.js
+++ b/demo-shell-ng2/systemjs.config.js
@@ -43,8 +43,8 @@
         'ng2-alfresco-search': {defaultExtension: 'js'},
         'ng2-alfresco-upload': {defaultExtension: 'js'},
         'ng2-alfresco-viewer': {defaultExtension: 'js'},
-        'ng2-translate': {defaultExtension: 'js'},
-        'rxjs': {defaultExtension: 'js'}
+        'rxjs': {defaultExtension: 'js'},
+        'ng2-translate': {defaultExtension: 'js'}
     };
 
     var config = {
