Created splash screen.

src/Application/SiteBundle/Resources/public/css/splash.css

@@ -0,0 +1,24 @@
+.x-mask.splashscreen {
+    background-color: white;
+    opacity: 1;
+}
+
+.x-mask-msg.splashscreen,
+.x-mask-msg.splashscreen div {
+    font-size: 16px;
+    padding: 30px 5px 5px 5px;
+    border: none;
+    background-color: transparent;
+    background-position: top center;
+}
+
+.x-message-box .x-window-body .x-box-inner {
+    min-height: 110px !important;
+}
+
+.x-splash-icon {
+    /* Important required due to the loading symbols CSS selector */
+    background-image: url('images/logo-splash.png') !important;
+    margin-top: -30px;
+    margin-bottom: 10px;
+}

src/Application/SiteBundle/Resources/public/js/app/Application.js

@@ -7,6 +7,22 @@ Ext.Loader.setConfig({
     }
 });
 
+// Splash screen initialization
+var splashscreen;
+
+Ext.onReady(function() {
+    // Start the mask on the body and get a reference to the mask
+    splashscreen = Ext.getBody().mask('Loading application', 'splashscreen');
+    // Add a new class to this mask as we want it to look different from the default.
+    splashscreen.addCls('splashscreen');
+
+    // Insert a new div before the loading icon where we can place our logo.
+    Ext.DomHelper.insertFirst(Ext.query('.x-mask-msg')[0], {
+        cls: 'x-splash-icon'
+    });
+});
+
+// Application initialization
 Ext.application({
     name: 'SnippetsManager',
     appFolder: "bundles/applicationsite/js/app",
@@ -18,6 +34,30 @@ Ext.application({
 
     launch: function() {
         // This is fired as soon as the page is ready
-        //console.log("TEST");
+        this.hideSplashScreen();
+    },
+
+    hideSplashScreen: function() {
+        // Setup a task to fadeOut the splashscreen
+        var task = new Ext.util.DelayedTask(function() {
+            // Fade out the body mask
+            splashscreen.fadeOut({
+                duration: 1000,
+                remove:true
+            });
+            // Fade out the icon and message
+            splashscreen.next().fadeOut({
+                duration: 1000,
+                remove:true,
+                listeners: {
+                    afteranimate: function() {
+                        // Set the body as unmasked after the animation
+                        Ext.getBody().unmask();
+                    }
+                }
+            });
+        });
+        // Run the fade 500 milliseconds after launch.
+        task.delay(500);
     }
 });

src/Application/SiteBundle/Resources/views/App/index.html.twig

@@ -3,6 +3,7 @@
 {% block stylesheets %}
     {{ parent() }}
     <link href="{{ asset('bundles/applicationsite/js/extjs/resources/css/ext-all.css') }}" type="text/css" rel="stylesheet" />
+    <link href="{{ asset('bundles/applicationsite/css/splash.css') }}" type="text/css" rel="stylesheet" />
 {% endblock %}
 
 {% block javascripts %}