display a spinner whilst the app is loading (#491)

no issue - use the same loading indicator as used on my.ghost.org - will display whilst the JS is loading and initializing rather than showing a completely blank screen
TryGhost · Jan 15, 2017 · b2b70e5 · b2b70e5
1 parent b01b8a6
commit b2b70e5
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 0 deletions.
diff --git a/app/index.html b/app/index.html
@@ -37,6 +37,13 @@
     {{content-for "head-footer"}}
 </head>
 <body>
+
+<div class="ember-load-indicator">
+    <div class="gh-loading-content">
+        <div class="gh-loading-spinner"></div>
+    </div>
+</div>
+
 {{content-for "body"}}
 
 {{content-for "body-footer"}}

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -17,6 +17,7 @@
 
 /* Components: Groups of Patterns
 /* ---------------------------------------------------------- */
+@import "components/loading-indicator.css";
 @import "components/modals.css";
 @import "components/notifications.css";
 @import "components/uploader.css";

diff --git a/app/styles/components/loading-indicator.css b/app/styles/components/loading-indicator.css
@@ -0,0 +1,58 @@
+/* Loading state */
+.ember-load-indicator {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    overflow: hidden;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    padding-bottom: 8vh;
+}
+
+.gh-loading-content {
+    position: relative;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    flex-direction: column;
+}
+
+.gh-loading-content.basic-auth {
+    z-index: 1000;
+}
+
+.gh-loading-spinner {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    margin: -2px 0;
+    width: 50px;
+    height: 50px;
+    border: rgba(0,0,0,0.1) solid 1px;
+    border-radius: 100px;
+    animation: spin 1s linear infinite;
+}
+
+.gh-loading-spinner:before {
+    content: "";
+    display: block;
+    margin-top: 7px;
+    width: 7px;
+    height: 7px;
+    background: #4C5156;
+    border-radius: 100px;
+    z-index: 10;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -26,3 +26,5 @@
                           close=(route-action "toggleMarkdownHelpModal")
                           modifier="wide"}}
 {{/if}}
+
+{{ember-load-remover}}
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "ember-export-application-global": "1.1.1",
     "ember-invoke-action": "1.4.0",
     "ember-light-table": "1.8.1",
+    "ember-load": "0.0.11",
     "ember-load-initializers": "0.6.3",
     "ember-myth": "0.1.1",
     "ember-one-way-controls": "1.1.2",