Improve app loading sequence

assets/javascripts/app/app.coffee

@@ -10,7 +10,6 @@
   init: ->
     try @initErrorTracking() catch
     return unless @browserCheck()
-    @showLoading()
 
     @el = $('._app')
     @localStorage = new LocalStorageStore
@@ -38,8 +37,8 @@
 
   browserCheck: ->
     return true if @isSupportedBrowser()
-    document.body.className = ''
     document.body.innerHTML = app.templates.unsupportedBrowser
+    @hideLoadingScreen()
     false
 
   initErrorTracking: ->
@@ -103,7 +102,7 @@
     @initDoc(doc) for doc in @docs.all()
     @trigger 'ready'
     @router.start()
-    @hideLoading()
+    @hideLoadingScreen()
     setTimeout =>
       @welcomeBack() unless @doc
       @removeEvent 'ready bootError'
@@ -181,15 +180,9 @@
       new app.views.Tip(tip)
     return
 
-  showLoading: ->
-    document.body.classList.remove '_noscript'
-    document.body.classList.add '_loading'
-    return
-
-  hideLoading: ->
+  hideLoadingScreen: ->
     document.body.classList.add '_overlay-scrollbars' if $.overlayScrollbarsEnabled()
-    document.body.classList.remove '_booting'
-    document.body.classList.remove '_loading'
+    document.documentElement.classList.remove '_booting'
     return
 
   indexHost: ->
@@ -199,7 +192,7 @@
 
   onBootError: (args...) ->
     @trigger 'bootError'
-    @hideLoading()
+    @hideLoadingScreen()
     return
 
   onQuotaExceeded: ->
@@ -221,7 +214,7 @@
       @onInjectionError()
     else if @isAppError args...
       @previousErrorHandler? args...
-      @hideLoading()
+      @hideLoadingScreen()
       @errorNotif or= new app.views.Notif 'Error'
       @errorNotif.show()
     return

assets/stylesheets/components/_app.scss

@@ -3,13 +3,11 @@
   z-index: 1;
   height: 100%;
   overflow: hidden;
-  background: $contentBackground;
   -webkit-transition: opacity .2s;
           transition: opacity .2s;
   @extend %border-box;
 
-  ._booting > & { opacity: 0; }
-  ._noscript > & { display: none; }
+  ._booting & { opacity: 0; }
 
   ._max-width & {
     margin: 0 auto;
@@ -17,29 +15,3 @@
     box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
   }
 }
-
-._booting {
-  opacity: 0;
-
-  &._loading, &._loading:before { opacity: 1; }
-
-  &:before {
-    content: 'Loading\2026';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    line-height: 1;
-    margin-top: -.6em;
-    font-size: 4rem;
-    font-weight: 300;
-    letter-spacing: -.125rem;
-    color: $loadingText;
-    text-align: center;
-    opacity: 0;
-    -webkit-transition: opacity .1s .3s;
-            transition: opacity .1s .3s;
-  }
-}
-
-._noscript { opacity: 1; }

assets/stylesheets/components/_content.scss

@@ -43,9 +43,24 @@
   }
 }
 
+%loading {
+  content: 'Loading\2026';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  line-height: 1;
+  margin-top: -.6em;
+  font-size: 4rem;
+  font-weight: 300;
+  letter-spacing: -.125rem;
+  color: $loadingText;
+  text-align: center;
+  cursor: default;
+}
+
 ._content-loading:before {
-  opacity: 1;
-  @extend ._booting:before;
+  @extend %loading;
 }
 
 //
@@ -54,9 +69,7 @@
 
 ._splash-title {
   color: $splashText;
-  cursor: default;
-  opacity: 1;
-  @extend ._booting:before, %user-select-none;
+  @extend %loading, %user-select-none;
 }
 
 //

assets/stylesheets/components/_mobile.scss

@@ -4,7 +4,6 @@
 
 ._mobile {
   font-size: 100%;
-  background: $contentBackground;
 
   ._hide-on-mobile { display: none; }
 
@@ -12,7 +11,9 @@
 
   body { -ms-overflow-style: -ms-autohiding-scrollbar; }
 
-  ._app, ._content { overflow: visible; }
+  &:not(._booting) {
+    ._app, ._content { overflow: visible; }
+  }
 
   ._container {
     margin: 0;
@@ -28,7 +29,7 @@
     &:before { content: none; }
   }
 
-  ._booting:before, ._content-loading:before { font-size: 3rem; }
+  ._content-loading:before, ._splash-title { font-size: 3rem; }
 
   ._header { position: fixed; }
 

assets/stylesheets/global/_base.scss

@@ -1,7 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
-  background: $documentBackground;
+  background: $contentBackground;
 
   @media #{$mediumScreen} { font-size: 93.75%; }
 }

assets/stylesheets/global/_variables-dark.scss

@@ -11,7 +11,6 @@ $sidebarWidth: 20rem;
 $sidebarMediumWidth: 16rem;
 
 $contentBackground: #33373a;
-$documentBackground: $contentBackground;
 
 $textColor: #cbd0d0;
 $textColorLight: #9da5ad;

assets/stylesheets/global/_variables.scss

@@ -11,7 +11,6 @@ $sidebarWidth: 20rem;
 $sidebarMediumWidth: 16rem;
 
 $contentBackground: #fff;
-$documentBackground: #fafafa;
 
 $textColor: #333;
 $textColorLight: #666;

test/app_test.rb

@@ -43,7 +43,7 @@ class AppTest < MiniTest::Spec
     it "sets layout from cookie" do
       set_cookie('layout=foo')
       get '/'
-      assert_includes last_response.body, '<body class="_booting _noscript foo">'
+      assert_includes last_response.body, '<body class="foo">'
     end
   end
 

views/index.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en">
+<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en" class="_booting">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
@@ -31,11 +31,12 @@
   <link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
   <link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">
   <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
-  <%= javascript_tag 'application', asset_host: false %>
-  <%= javascript_tag 'docs' %><% unless App.production? %>
-  <%= javascript_tag 'debug' %><% end %>
 </head>
-<body class="_booting _noscript<%= " #{app_layout}" if app_layout %>">
+<body<%= %w( class="#{app_layout}") if app_layout %>>
 <noscript class="_fail">DevDocs requires JavaScript to run.</noscript>
-<%= erb :app %></body>
+<%= erb :app -%>
+<%= javascript_tag 'application', asset_host: false %>
+<%= javascript_tag 'docs' %><% unless App.production? %>
+<%= javascript_tag 'debug' %><% end %>
+</body>
 </html>

views/other.erb

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="_booting">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
@@ -12,10 +12,11 @@
   <link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">
   <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">
   <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
-  <%= javascript_tag 'application', asset_host: false %><% unless App.production? %>
-  <%= javascript_tag 'debug' %><% end %>
 </head>
-<body class="_booting _noscript<%= " #{app_layout}" if app_layout %>" data-doc="<%= CGI::escape_html @doc.to_json %>">
+<body<%= %w( class="#{app_layout}") if app_layout %> data-doc="<%= CGI::escape_html @doc.to_json %>">
 <noscript class="_fail">DevDocs requires JavaScript to run.</noscript>
-<%= erb :app %></body>
+<%= erb :app -%>
+<%= javascript_tag 'application', asset_host: false %><% unless App.production? %>
+<%= javascript_tag 'debug' %><% end %>
+</body>
 </html>