Improve app loading sequence

Thibaut Courouble committed 9 years ago

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

Unified · Split

10 files

assets/javascripts/app/app.coffee +6 −13
assets/stylesheets/components/_app.scss +1 −29
assets/stylesheets/components/_content.scss +18 −5
assets/stylesheets/components/_mobile.scss +4 −3
assets/stylesheets/global/_base.scss +1 −1
assets/stylesheets/global/_variables-dark.scss +0 −1
assets/stylesheets/global/_variables.scss +0 −1
test/app_test.rb +1 −1
views/index.erb +7 −6
views/other.erb +6 −5

@@ -10,7 +10,6 @@ · 9 unmodified lines
10	10	init: ->
11	11	try @initErrorTracking() catch
12	12	return unless @browserCheck()
13		− @showLoading()
14	13
15	14	@el = $('._app')
16	15	@localStorage = new LocalStorageStore
@@ -38,8 +37,8 @@ · 21 unmodified lines
38	37
39	38	browserCheck: ->
40	39	return true if @isSupportedBrowser()
41		− document.body.className = ''
42	40	document.body.innerHTML = app.templates.unsupportedBrowser
	41	+ @hideLoadingScreen()
43	42	false
44	43
45	44	initErrorTracking: ->
@@ -103,7 +102,7 @@ · 57 unmodified lines
103	102	@initDoc(doc) for doc in @docs.all()
104	103	@trigger 'ready'
105	104	@router.start()
106		− @hideLoading()
	105	+ @hideLoadingScreen()
107	106	setTimeout =>
108	107	@welcomeBack() unless @doc
109	108	@removeEvent 'ready bootError'
@@ -181,15 +180,9 @@ · 71 unmodified lines
181	180	new app.views.Tip(tip)
182	181	return
183	182
184		− showLoading: ->
185		− document.body.classList.remove '_noscript'
186		− document.body.classList.add '_loading'
187		− return
188		−
189		− hideLoading: ->
	183	+ hideLoadingScreen: ->
190	184	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'
193	186	return
194	187
195	188	indexHost: ->
@@ -199,7 +192,7 @@ · 3 unmodified lines
199	192
200	193	onBootError: (args...) ->
201	194	@trigger 'bootError'
202		− @hideLoading()
	195	+ @hideLoadingScreen()
203	196	return
204	197
205	198	onQuotaExceeded: ->
@@ -221,7 +214,7 @@ · 15 unmodified lines
221	214	@onInjectionError()
222	215	else if @isAppError args...
223	216	@previousErrorHandler? args...
224		− @hideLoading()
	217	+ @hideLoadingScreen()
225	218	@errorNotif or= new app.views.Notif 'Error'
226	219	@errorNotif.show()
227	220	return

assets/stylesheets/components/_app.scss+1−29

@@ -3,13 +3,11 @@ · 2 unmodified lines
3	3	z-index: 1;
4	4	height: 100%;
5	5	overflow: hidden;
6		− background: $contentBackground;
7	6	-webkit-transition: opacity .2s;
8	7	transition: opacity .2s;
9	8	@extend %border-box;
10	9
11		− ._booting > & { opacity: 0; }
12		− ._noscript > & { display: none; }
	10	+ ._booting & { opacity: 0; }
13	11
14	12	._max-width & {
15	13	margin: 0 auto;
@@ -17,29 +15,3 @@ · 1 unmodified line
17	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	62	._content-loading:before {
47		− opacity: 1;
48		− @extend ._booting:before;
	63	+ @extend %loading;
49	64	}
50	65
51	66	//
@@ -54,9 +69,7 @@ · 2 unmodified lines
54	69
55	70	._splash-title {
56	71	color: $splashText;
57		− cursor: default;
58		− opacity: 1;
59		− @extend ._booting:before, %user-select-none;
	72	+ @extend %loading, %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	5	._mobile {
6	6	font-size: 100%;
7		− background: $contentBackground;
8	7
9	8	._hide-on-mobile { display: none; }
10	9
@@ -12,7 +11,9 @@ · 1 unmodified line
12	11
13	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	18	._container {
18	19	margin: 0;
@@ -28,7 +29,7 @@ · 9 unmodified lines
28	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	34	._header { position: fixed; }
34	35

assets/stylesheets/global/_base.scss+1−1

@@ -1,7 +1,7 @@
1	1	html {
2	2	height: 100%;
3	3	font-size: 100%;
4		− background: $documentBackground;
	4	+ background: $contentBackground;
5	5
6	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	11	$sidebarMediumWidth: 16rem;
12	12
13	13	$contentBackground: #33373a;
14		−$documentBackground: $contentBackground;
15	14
16	15	$textColor: #cbd0d0;
17	16	$textColorLight: #9da5ad;

assets/stylesheets/global/_variables.scss+0−1

@@ -11,7 +11,6 @@ $sidebarWidth: 20rem; · 10 unmodified lines
11	11	$sidebarMediumWidth: 16rem;
12	12
13	13	$contentBackground: #fff;
14		−$documentBackground: #fafafa;
15	14
16	15	$textColor: #333;
17	16	$textColorLight: #666;

test/app_test.rb+1−1

@@ -43,7 +43,7 @@ class AppTest < MiniTest::Spec · 42 unmodified lines
43	43	it "sets layout from cookie" do
44	44	set_cookie('layout=foo')
45	45	get '/'
46		− assert_includes last_response.body, '<body class="_booting _noscript foo">'
	46	+ assert_includes last_response.body, '<body class="foo">'
47	47	end
48	48	end
49	49

views/index.erb+7−6

@@ -1,5 +1,5 @@
1	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	3	<head>
4	4	<meta charset="utf-8">
5	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	31	<link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
32	32	<link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">
33	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	34	</head>
38		−<body class="_booting _noscript<%= " #{app_layout}" if app_layout %>">
	35	+<body<%= %w( class="#{app_layout}") if app_layout %>>
39	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	42	</html>

views/other.erb+6−5

@@ -1,5 +1,5 @@
1	1	<!DOCTYPE html>
2		−<html lang="en">
	2	+<html lang="en" class="_booting">
3	3	<head>
4	4	<meta charset="utf-8">
5	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	12	<link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">
13	13	<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">
14	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	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	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	22	</html>