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>
simonista · Mar 6, 2012 · d1906d2 · d1906d2
1 parent 173b6ee
commit d1906d2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/app/stylesheets/base/_layout.sass b/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

diff --git a/app/views/layouts/application.html.erb b/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>