Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

hide content until scripts are loaded

Because RequireJS loads scripts asynchronously the
page renders but the JS hasn't been evaluated. In this
commit we hide all <a> and <button> tags until all
resources are loaded.

Previously the script tags blocked the page from
rendering while they loaded and executed.

When we have a single top-level require we can
remove this logic from the layout, and do it there
without all the polling fanfare.

Change-Id: I13771caf588508bacc6a70e4609c4af03bf522cd
Reviewed-on: https://gerrit.instructure.com/9191
Tested-by: Hudson <hudson@instructure.com>
Reviewed-by: Ryan Florence <ryanf@instructure.com>
  • Loading branch information...
commit d1906d2225e032485dbf70cb632fb19e3a88cedf 1 parent 173b6ee
@ryanflorence ryanflorence authored zwily committed
View
10 app/stylesheets/base/_layout.sass
@@ -5,7 +5,6 @@ body, html
body
background: url("/images/body-bg.png") repeat-x top #e0e0e0
-
&.no-headers
background: #fff
#header, #topbar, #left-side, #breadcrumbs
@@ -22,14 +21,19 @@ body
box-shadow: none
#content
padding-top: 0
-
+
+// so we don't get the non-interactionable content
+.scripts-not-loaded
+ a, button
+ visibility: hidden !important
+
#wrapper-container
// the sole purpose of this div is to make it so the shadow on #wrapper does not cause the page to have scroll bars.
overflow: hidden
#wrapper
margin: 0 21px
+pie-clearfix
-
+
#main
View
30 app/views/layouts/application.html.erb
@@ -19,10 +19,10 @@
@body_classes << "context-#{@context.asset_string}" if @context
-%><!DOCTYPE html>
-<!--[if IE 7 ]> <html class="ie ie7" lang=<%= @locale %>> <![endif]-->
-<!--[if IE 8 ]> <html class="ie ie8" lang=<%= @locale %>> <![endif]-->
-<!--[if gte IE 9 ]><html class="ie ie9" lang=<%= @locale %>> <![endif]-->
-<!--[if !(IE)]><!--> <html class="not-ie" lang=<%= @locale %>> <!--<![endif]-->
+<!--[if IE 7 ]> <html class="ie ie7 scripts-not-loaded" lang=<%= @locale %>> <![endif]-->
+<!--[if IE 8 ]> <html class="ie ie8 scripts-not-loaded" lang=<%= @locale %>> <![endif]-->
+<!--[if gte IE 9 ]><html class="ie ie9 scripts-not-loaded" lang=<%= @locale %>> <![endif]-->
+<!--[if !(IE)]><!--> <html class="not-ie not-ready scripts-not-loaded" lang=<%= @locale %>> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title><%= yield :page_title || t('missing_page_title', "Add a page title here.") %></title>
@@ -275,5 +275,27 @@
<%= include_js_bundles %>
<%= include_account_js %>
<%= render_js_blocks %>
+
+<script>
+// Determines if the scripts are loaded.
+// When we get everything out of the views, and have a single top-level
+// `require`, this becomes meaningless and will be abandoned.
+(function() {
+ var attempts = 0;
+ var timeout = 10;
+ var check = function() {
+ attempts++;
+ var done = require.resourcesDone === true
+ var giveup = attempts === 100; // 1 second
+ if (done || giveup) {
+ $('html').removeClass('scripts-not-loaded');
+ return;
+ }
+ setTimeout(check, timeout);
+ };
+
+ check();
+}).call(this);
+</script>
</body>
</html>

0 comments on commit d1906d2

Please sign in to comment.
Something went wrong with that request. Please try again.