Show create loading screen based on hash. Hide when vfs is connected

plugins/c9.ide.layout.classic/loading-flat.css

@@ -1,8 +1,14 @@
-BODY.loading{
+#loadingcontainer{
     background: url(images/loadingbgrepeat.png);
     background-size: 1px 8px;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    z-index: 200000;
+    left: 0;
+    top: 0;
 }
-BODY.loading.dark{
+#loadingcontainer.dark{
     background: url(images/loadingbgrepeat_dark.png);
     background-size: 1px 8px;
 }
@@ -14,15 +20,15 @@ BODY.loading.dark{
     font-style: normal;
     height: 100%;
     width: 100%;
-    position: fixed;
+    position: absolute;
-    text-align: center;
     z-index: 200000;
     left: 0;
     top: 0;
+    text-align: center;
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
 }
-#loadingide.dark, .dark #loadingide{
+.dark #loadingide{
     background-image: url(images/c9-logo-white.png);
 }
 
@@ -116,14 +122,14 @@ BODY.loading.dark{
     width: 200px;
     text-align: center;
     top: 57%;
-    margin-top: 200px;
+    margin-top: 0;
 }
 
 #loadingide .cool-message {
     display: block;
     font-family: Arial;
     font-size: 30px;
-    color: #A7A7A7;
+    color: #717171;
     white-space: nowrap;
     position: absolute;
     top: 30%;
@@ -131,7 +137,7 @@ BODY.loading.dark{
     width: 1000px;
     text-align: center;
     margin-left: -500px;
-    margin-top: 250px;
+    margin-top: 350px;
 }
 #loadingide.dark .cool-message {
     color: #757575;
@@ -141,10 +147,14 @@ BODY.loading.dark{
     background: url(images/running_flat_light@2x.png);
     background-size: 300px 20px;
     animation: rotation 0.6s infinite steps(16);
-    width: 20px;
+    width: 20px !important;
-    height: 20px;
+    height: 20px !important;
     background-repeat: no-repeat;
     display: inline-block;
+    min-width: 20px !important;
+    min-height: 20px !important;
+    box-sizing: content-box;
+    border: 0;
 }
 
 @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);  } 100% {-webkit-transform: rotate(359deg); transform: rotate(359deg);}}

plugins/c9.ide.server/views/flat-load-screen.html

@@ -1,14 +1,16 @@
 <link rel="stylesheet" type="text/css" href="<%=staticPrefix%>/plugins/c9.ide.layout.classic/loading-flat.css" />
-<div id="loadingide" class="<%-: theme + (isDark ? " dark" : "") %>">
+<div id="loadingcontainer" class="<%-: theme + (isDark ? " dark" : "") %>">
-    <div class="cool-message"></div>
+    <div id="loadingide">
-    <div class="status" style="display:none"><div class="spinner"></div></div>
+        <div class="cool-message"></div>
-    
+        <div class="status" style="display:none"><div class="spinner"></div></div>
-    <div id="content" class="loading-progress">
+        
-    </div>
+        <div id="content" class="loading-progress">
-    <div class="footer">
+        </div>
-        <a href="https://docs.c9.io">Documentation</a> | 
+        <div class="footer">
-        <a href="http://status.c9.io">Server Status</a> | 
+            <a href="https://docs.c9.io">Documentation</a> | 
-        <a href="http://support.c9.io">Support</a>
+            <a href="http://status.c9.io">Server Status</a> | 
+            <a href="http://support.c9.io">Support</a>
+        </div>
     </div>
 </div>
 <script>
@@ -29,8 +31,14 @@
     
     var idx = Math.floor(Math.random() * messages.length);
     if (idx == messages.length) idx = messages.length - 1;
-    document.querySelector("#loadingide .cool-message").innerHTML =
+    var msg = messages[idx];
-        messages[idx];
+    
+    if (~location.hash.indexOf("create")) {
+        msg = "Creating Your New Workspace";
+        location.hash = location.hash.replace(/&?create/, "");
+    }
+    
+    document.querySelector("#loadingide .cool-message").innerHTML = msg;
 
     setTimeout(function(){
         var s = document.querySelector("#loadingide .status");
@@ -38,7 +46,7 @@
     }, 2000);
     
     window.hideLoader = function(){
-        var loader = document.getElementById("loadingide");
+        var loader = document.getElementById("loadingcontainer");
         loader.parentNode.removeChild(loader);
         
         document.body.className = document.body.className.replace("loading " + loadingIde.className, "");

plugins/c9.vfs.standalone/views/standalone.html.ejs

@@ -101,13 +101,23 @@
 
                 // For Development only
                 function done(){
-                    app.services.c9.ready();
+                    var vfs = app.services.vfs;
-                    app.services.c9.totalLoadTime = Date.now() - start;
+                    var c9 = app.services.c9;
+                    
+                    c9.ready();
+                    c9.totalLoadTime = Date.now() - start;
 
                     console.warn("Total Load Time: ", Date.now() - start);
                     
-                    if (window.hideLoader)
+                    if (window.hideLoader) {
-                        window.hideLoader();
+                        if (vfs.connected)
+                            window.hideLoader();
+                        else {
+                            vfs.once("connect", function(){
+                                window.hideLoader();
+                            });
+                        }
+                    }
                 }
             }, function loadError(mod) {
                 if (mod.id === "plugins/c9.ide.clipboard/html5")