mirrors
/
devdocs
mirror of https://github.com/freeCodeCamp/devdocs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve app loading sequence

Browse Source
pull/666/merge
Thibaut Courouble 7 years ago
parent 9e97357524
commit 7428645dc1
10 changed files with 44 additions and 65 deletions
Show Stats Download Patch File Download Diff File

19
assets/javascripts/app/app.coffee
Unescape View File

@ -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

30
assets/stylesheets/components/_app.scss
Unescape View File

@ -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; }

23
assets/stylesheets/components/_content.scss
Unescape View File

@ -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;
}
//

5
assets/stylesheets/components/_mobile.scss
Unescape View File

@ -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; }
&: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; }

2
assets/stylesheets/global/_base.scss
Unescape View File

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

1
assets/stylesheets/global/_variables-dark.scss
Unescape View File

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

1
assets/stylesheets/global/_variables.scss
Unescape View File

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

2
test/app_test.rb
Unescape View File

@ -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

13
views/index.erb
Unescape View File

@ -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>

11
views/other.erb
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save