Improve app loading sequence

pull/666/merge
Thibaut Courouble 7 years ago
parent 9e97357524
commit 7428645dc1

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

@ -3,13 +3,11 @@
z-index: 1; z-index: 1;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: $contentBackground;
-webkit-transition: opacity .2s; -webkit-transition: opacity .2s;
transition: opacity .2s; transition: opacity .2s;
@extend %border-box; @extend %border-box;
._booting > & { opacity: 0; } ._booting & { opacity: 0; }
._noscript > & { display: none; }
._max-width & { ._max-width & {
margin: 0 auto; margin: 0 auto;
@ -17,29 +15,3 @@
box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder; 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; }

@ -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 { ._content-loading:before {
opacity: 1; @extend %loading;
@extend ._booting:before;
} }
// //
@ -54,9 +69,7 @@
._splash-title { ._splash-title {
color: $splashText; color: $splashText;
cursor: default; @extend %loading, %user-select-none;
opacity: 1;
@extend ._booting:before, %user-select-none;
} }
// //

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

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

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

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

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

@ -1,5 +1,5 @@
<!DOCTYPE html> <!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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"> <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="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="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 %>"> <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> </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> <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> </html>

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="_booting">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <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="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="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">
<link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>"> <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> </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> <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> </html>

Loading…
Cancel
Save