History

Improve app loading sequence

Thibaut Courouble committed 9 years ago

Commit 74286451 parent 9e9735710 files · +44 −65Browse files

Unified · Split

10 files
  1. assets/javascripts/app/app.coffee +6 −13
  2. assets/stylesheets/components/_app.scss +1 −29
  3. assets/stylesheets/components/_content.scss +18 −5
  4. assets/stylesheets/components/_mobile.scss +4 −3
  5. assets/stylesheets/global/_base.scss +1 −1
  6. assets/stylesheets/global/_variables-dark.scss +0 −1
  7. assets/stylesheets/global/_variables.scss +0 −1
  8. test/app_test.rb +1 −1
  9. views/index.erb +7 −6
  10. views/other.erb +6 −5
assets/javascripts/app/app.coffee+6−13
@@ -10,7 +10,6 @@ · 9 unmodified lines
10 init: ->10 init: ->
11 try @initErrorTracking() catch11 try @initErrorTracking() catch
12 return unless @browserCheck()12 return unless @browserCheck()
13 @showLoading()
14 13
15 @el = $('._app')14 @el = $('._app')
16 @localStorage = new LocalStorageStore15 @localStorage = new LocalStorageStore
@@ -38,8 +37,8 @@ · 21 unmodified lines
38 37
39 browserCheck: ->38 browserCheck: ->
40 return true if @isSupportedBrowser()39 return true if @isSupportedBrowser()
41 document.body.className = ''
42 document.body.innerHTML = app.templates.unsupportedBrowser40 document.body.innerHTML = app.templates.unsupportedBrowser
41 @hideLoadingScreen()
43 false42 false
44 43
45 initErrorTracking: ->44 initErrorTracking: ->
@@ -103,7 +102,7 @@ · 57 unmodified lines
103 @initDoc(doc) for doc in @docs.all()102 @initDoc(doc) for doc in @docs.all()
104 @trigger 'ready'103 @trigger 'ready'
105 @router.start()104 @router.start()
106 @hideLoading()105 @hideLoadingScreen()
107 setTimeout =>106 setTimeout =>
108 @welcomeBack() unless @doc107 @welcomeBack() unless @doc
109 @removeEvent 'ready bootError'108 @removeEvent 'ready bootError'
@@ -181,15 +180,9 @@ · 71 unmodified lines
181 new app.views.Tip(tip)180 new app.views.Tip(tip)
182 return181 return
183 182
184 showLoading: ->183 hideLoadingScreen: ->
185 document.body.classList.remove '_noscript'
186 document.body.classList.add '_loading'
187 return
188
189 hideLoading: ->
190 document.body.classList.add '_overlay-scrollbars' if $.overlayScrollbarsEnabled()184 document.body.classList.add '_overlay-scrollbars' if $.overlayScrollbarsEnabled()
191 document.body.classList.remove '_booting'185 document.documentElement.classList.remove '_booting'
192 document.body.classList.remove '_loading'
193 return186 return
194 187
195 indexHost: ->188 indexHost: ->
@@ -199,7 +192,7 @@ · 3 unmodified lines
199 192
200 onBootError: (args...) ->193 onBootError: (args...) ->
201 @trigger 'bootError'194 @trigger 'bootError'
202 @hideLoading()195 @hideLoadingScreen()
203 return196 return
204 197
205 onQuotaExceeded: ->198 onQuotaExceeded: ->
@@ -221,7 +214,7 @@ · 15 unmodified lines
221 @onInjectionError()214 @onInjectionError()
222 else if @isAppError args...215 else if @isAppError args...
223 @previousErrorHandler? args...216 @previousErrorHandler? args...
224 @hideLoading()217 @hideLoadingScreen()
225 @errorNotif or= new app.views.Notif 'Error'218 @errorNotif or= new app.views.Notif 'Error'
226 @errorNotif.show()219 @errorNotif.show()
227 return220 return
assets/stylesheets/components/_app.scss+1−29
@@ -3,13 +3,11 @@ · 2 unmodified lines
3 z-index: 1;3 z-index: 1;
4 height: 100%;4 height: 100%;
5 overflow: hidden;5 overflow: hidden;
6 background: $contentBackground;
7 -webkit-transition: opacity .2s;6 -webkit-transition: opacity .2s;
8 transition: opacity .2s;7 transition: opacity .2s;
9 @extend %border-box;8 @extend %border-box;
10 9
11 ._booting > & { opacity: 0; }10 ._booting & { opacity: 0; }
12 ._noscript > & { display: none; }
13 11
14 ._max-width & {12 ._max-width & {
15 margin: 0 auto;13 margin: 0 auto;
@@ -17,29 +15,3 @@ · 1 unmodified line
17 box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;15 box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
18 }16 }
19}17}
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+18−5
@@ -43,9 +43,24 @@ · 42 unmodified lines
43 }43 }
44}44}
45 45
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
46._content-loading:before {62._content-loading:before {
47 opacity: 1;63 @extend %loading;
48 @extend ._booting:before;
49}64}
50 65
51//66//
@@ -54,9 +69,7 @@ · 2 unmodified lines
54 69
55._splash-title {70._splash-title {
56 color: $splashText;71 color: $splashText;
57 cursor: default;72 @extend %loading, %user-select-none;
58 opacity: 1;
59 @extend ._booting:before, %user-select-none;
60}73}
61 74
62//75//
assets/stylesheets/components/_mobile.scss+4−3
@@ -4,7 +4,6 @@ · 3 unmodified lines
4 4
5._mobile {5._mobile {
6 font-size: 100%;6 font-size: 100%;
7 background: $contentBackground;
8 7
9 ._hide-on-mobile { display: none; }8 ._hide-on-mobile { display: none; }
10 9
@@ -12,7 +11,9 @@ · 1 unmodified line
12 11
13 body { -ms-overflow-style: -ms-autohiding-scrollbar; }12 body { -ms-overflow-style: -ms-autohiding-scrollbar; }
14 13
15 ._app, ._content { overflow: visible; }14 &:not(._booting) {
15 ._app, ._content { overflow: visible; }
16 }
16 17
17 ._container {18 ._container {
18 margin: 0;19 margin: 0;
@@ -28,7 +29,7 @@ · 9 unmodified lines
28 &:before { content: none; }29 &:before { content: none; }
29 }30 }
30 31
31 ._booting:before, ._content-loading:before { font-size: 3rem; }32 ._content-loading:before, ._splash-title { font-size: 3rem; }
32 33
33 ._header { position: fixed; }34 ._header { position: fixed; }
34 35
assets/stylesheets/global/_base.scss+1−1
@@ -1,7 +1,7 @@
1html {1html {
2 height: 100%;2 height: 100%;
3 font-size: 100%;3 font-size: 100%;
4 background: $documentBackground;4 background: $contentBackground;
5 5
6 @media #{$mediumScreen} { font-size: 93.75%; }6 @media #{$mediumScreen} { font-size: 93.75%; }
7}7}
assets/stylesheets/global/_variables-dark.scss+0−1
@@ -11,7 +11,6 @@ $sidebarWidth: 20rem; · 10 unmodified lines
11$sidebarMediumWidth: 16rem;11$sidebarMediumWidth: 16rem;
12 12
13$contentBackground: #33373a;13$contentBackground: #33373a;
14$documentBackground: $contentBackground;
15 14
16$textColor: #cbd0d0;15$textColor: #cbd0d0;
17$textColorLight: #9da5ad;16$textColorLight: #9da5ad;
assets/stylesheets/global/_variables.scss+0−1
@@ -11,7 +11,6 @@ $sidebarWidth: 20rem; · 10 unmodified lines
11$sidebarMediumWidth: 16rem;11$sidebarMediumWidth: 16rem;
12 12
13$contentBackground: #fff;13$contentBackground: #fff;
14$documentBackground: #fafafa;
15 14
16$textColor: #333;15$textColor: #333;
17$textColorLight: #666;16$textColorLight: #666;
test/app_test.rb+1−1
@@ -43,7 +43,7 @@ class AppTest < MiniTest::Spec · 42 unmodified lines
43 it "sets layout from cookie" do43 it "sets layout from cookie" do
44 set_cookie('layout=foo')44 set_cookie('layout=foo')
45 get '/'45 get '/'
46 assert_includes last_response.body, '<body class="_booting _noscript foo">'46 assert_includes last_response.body, '<body class="foo">'
47 end47 end
48 end48 end
49 49
views/index.erb+7−6
@@ -1,5 +1,5 @@
1<!DOCTYPE html>1<!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">
3<head>3<head>
4 <meta charset="utf-8">4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
@@ -31,11 +31,12 @@ · 25 unmodified lines
31 <link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">31 <link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
32 <link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">32 <link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">
33 <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">33 <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 %>
37</head>34</head>
38<body class="_booting _noscript<%= " #{app_layout}" if app_layout %>">35<body<%= %w( class="#{app_layout}") if app_layout %>>
39<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>36<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>
41</html>42</html>
views/other.erb+6−5
@@ -1,5 +1,5 @@
1<!DOCTYPE html>1<!DOCTYPE html>
2<html lang="en">2<html lang="en" class="_booting">
3<head>3<head>
4 <meta charset="utf-8">4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
@@ -12,10 +12,11 @@ · 6 unmodified lines
12 <link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">12 <link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">
13 <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">13 <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">
14 <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">14 <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 %>
17</head>15</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 %>">
19<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>17<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>
21</html>22</html>