Skip to content

Commit 7428645

Browse files
ThibautThibaut
committed
Improve app loading sequence
1 parent 9e97357 commit 7428645

10 files changed

Lines changed: 44 additions & 65 deletions

File tree

‎assets/javascripts/app/app.coffee‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
init: ->
1111
try @initErrorTracking() catch
1212
return unless @browserCheck()
13-
@showLoading()
1413

1514
@el = $('._app')
1615
@localStorage = new LocalStorageStore
@@ -38,8 +37,8 @@
3837

3938
browserCheck: ->
4039
return true if @isSupportedBrowser()
41-
document.body.className = ''
4240
document.body.innerHTML = app.templates.unsupportedBrowser
41+
@hideLoadingScreen()
4342
false
4443

4544
initErrorTracking: ->
@@ -103,7 +102,7 @@
103102
@initDoc(doc) for doc in @docs.all()
104103
@trigger 'ready'
105104
@router.start()
106-
@hideLoading()
105+
@hideLoadingScreen()
107106
setTimeout =>
108107
@welcomeBack() unless @doc
109108
@removeEvent 'ready bootError'
@@ -181,15 +180,9 @@
181180
new app.views.Tip(tip)
182181
return
183182

184-
showLoading: ->
185-
document.body.classList.remove '_noscript'
186-
document.body.classList.add '_loading'
187-
return
188-
189-
hideLoading: ->
183+
hideLoadingScreen: ->
190184
document.body.classList.add '_overlay-scrollbars' if $.overlayScrollbarsEnabled()
191-
document.body.classList.remove '_booting'
192-
document.body.classList.remove '_loading'
185+
document.documentElement.classList.remove '_booting'
193186
return
194187

195188
indexHost: ->
@@ -199,7 +192,7 @@
199192

200193
onBootError: (args...) ->
201194
@trigger 'bootError'
202-
@hideLoading()
195+
@hideLoadingScreen()
203196
return
204197

205198
onQuotaExceeded: ->
@@ -221,7 +214,7 @@
221214
@onInjectionError()
222215
else if @isAppError args...
223216
@previousErrorHandler? args...
224-
@hideLoading()
217+
@hideLoadingScreen()
225218
@errorNotif or= new app.views.Notif 'Error'
226219
@errorNotif.show()
227220
return

‎assets/stylesheets/components/_app.scss‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,15 @@
33
z-index: 1;
44
height: 100%;
55
overflow: hidden;
6-
background: $contentBackground;
76
-webkit-transition: opacity .2s;
87
transition: opacity .2s;
98
@extend %border-box;
109

11-
._booting > & { opacity: 0; }
12-
._noscript > & { display: none; }
10+
._booting & { opacity: 0; }
1311

1412
._max-width & {
1513
margin: 0 auto;
1614
max-width: $maxWidth;
1715
box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
1816
}
1917
}
20-
21-
._booting {
22-
opacity: 0;
23-
24-
&._loading, &._loading:before { opacity: 1; }
25-
26-
&:before {
27-
content: 'Loading\2026';
28-
position: absolute;
29-
top: 50%;
30-
left: 0;
31-
right: 0;
32-
line-height: 1;
33-
margin-top: -.6em;
34-
font-size: 4rem;
35-
font-weight: 300;
36-
letter-spacing: -.125rem;
37-
color: $loadingText;
38-
text-align: center;
39-
opacity: 0;
40-
-webkit-transition: opacity .1s .3s;
41-
transition: opacity .1s .3s;
42-
}
43-
}
44-
45-
._noscript { opacity: 1; }

‎assets/stylesheets/components/_content.scss‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,24 @@
4343
}
4444
}
4545

46+
%loading {
47+
content: 'Loading\2026';
48+
position: absolute;
49+
top: 50%;
50+
left: 0;
51+
right: 0;
52+
line-height: 1;
53+
margin-top: -.6em;
54+
font-size: 4rem;
55+
font-weight: 300;
56+
letter-spacing: -.125rem;
57+
color: $loadingText;
58+
text-align: center;
59+
cursor: default;
60+
}
61+
4662
._content-loading:before {
47-
opacity: 1;
48-
@extend ._booting:before;
63+
@extend %loading;
4964
}
5065

5166
//
@@ -54,9 +69,7 @@
5469

5570
._splash-title {
5671
color: $splashText;
57-
cursor: default;
58-
opacity: 1;
59-
@extend ._booting:before, %user-select-none;
72+
@extend %loading, %user-select-none;
6073
}
6174

6275
//

‎assets/stylesheets/components/_mobile.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44

55
._mobile {
66
font-size: 100%;
7-
background: $contentBackground;
87

98
._hide-on-mobile { display: none; }
109

1110
// Layout
1211

1312
body { -ms-overflow-style: -ms-autohiding-scrollbar; }
1413

15-
._app, ._content { overflow: visible; }
14+
&:not(._booting) {
15+
._app, ._content { overflow: visible; }
16+
}
1617

1718
._container {
1819
margin: 0;
@@ -28,7 +29,7 @@
2829
&:before { content: none; }
2930
}
3031

31-
._booting:before, ._content-loading:before { font-size: 3rem; }
32+
._content-loading:before, ._splash-title { font-size: 3rem; }
3233

3334
._header { position: fixed; }
3435

‎assets/stylesheets/global/_base.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
html {
22
height: 100%;
33
font-size: 100%;
4-
background: $documentBackground;
4+
background: $contentBackground;
55

66
@media #{$mediumScreen} { font-size: 93.75%; }
77
}

‎assets/stylesheets/global/_variables-dark.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ $sidebarWidth: 20rem;
1111
$sidebarMediumWidth: 16rem;
1212

1313
$contentBackground: #33373a;
14-
$documentBackground: $contentBackground;
1514

1615
$textColor: #cbd0d0;
1716
$textColorLight: #9da5ad;

‎assets/stylesheets/global/_variables.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ $sidebarWidth: 20rem;
1111
$sidebarMediumWidth: 16rem;
1212

1313
$contentBackground: #fff;
14-
$documentBackground: #fafafa;
1514

1615
$textColor: #333;
1716
$textColorLight: #666;

‎test/app_test.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ def app
4343
it "sets layout from cookie" do
4444
set_cookie('layout=foo')
4545
get '/'
46-
assert_includes last_response.body, '<body class="_booting _noscript foo">'
46+
assert_includes last_response.body, '<body class="foo">'
4747
end
4848
end
4949

‎views/index.erb‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en">
2+
<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en" class="_booting">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
@@ -31,11 +31,12 @@
3131
<link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
3232
<link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">
3333
<link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
34-
<%= javascript_tag 'application', asset_host: false %>
35-
<%= javascript_tag 'docs' %><% unless App.production? %>
36-
<%= javascript_tag 'debug' %><% end %>
3734
</head>
38-
<body class="_booting _noscript<%= " #{app_layout}" if app_layout %>">
35+
<body<%= %w( class="#{app_layout}") if app_layout %>>
3936
<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>
40-
<%= erb :app %></body>
37+
<%= erb :app -%>
38+
<%= javascript_tag 'application', asset_host: false %>
39+
<%= javascript_tag 'docs' %><% unless App.production? %>
40+
<%= javascript_tag 'debug' %><% end %>
41+
</body>
4142
</html>

‎views/other.erb‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="_booting">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
@@ -12,10 +12,11 @@
1212
<link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">
1313
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">
1414
<link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
15-
<%= javascript_tag 'application', asset_host: false %><% unless App.production? %>
16-
<%= javascript_tag 'debug' %><% end %>
1715
</head>
18-
<body class="_booting _noscript<%= " #{app_layout}" if app_layout %>" data-doc="<%= CGI::escape_html @doc.to_json %>">
16+
<body<%= %w( class="#{app_layout}") if app_layout %> data-doc="<%= CGI::escape_html @doc.to_json %>">
1917
<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>
20-
<%= erb :app %></body>
18+
<%= erb :app -%>
19+
<%= javascript_tag 'application', asset_host: false %><% unless App.production? %>
20+
<%= javascript_tag 'debug' %><% end %>
21+
</body>
2122
</html>

0 commit comments

Comments
 (0)