Hacks to prevent FLOUC (flash of unformatted content).

IPython/frontend/html/notebook/static/css/notebook.css

@@ -92,11 +92,13 body {
 
 
 div#header {
+    /* Initially hidden to prevent FLOUC */
+    display: none;
     position: relative;
     height: 45px;
     padding: 5px;
     margin: 0px;
-    width: 100%
+    width: 100%;
 }
 
 span#ipython_notebook {
@@ -143,6 +145,8 span#kernel_status {
 }
 
 div#notebook_app {
+    /* Initially hidden to prevent FLOUC */
+    display: none;
     width: 100%;
     position: relative;
 }

IPython/frontend/html/notebook/static/js/notebook.js

@@ -470,17 +470,17 var IPython = (function (IPython) {
         var that = this;
         var cell = that.selected_cell();
         var cell_index = that.find_cell_index(cell);
-        // TODO: the logic here needs to be moved into appropriate
-        // methods of Notebook.
         if (cell instanceof IPython.CodeCell) {
             cell.clear_output();
             var code = cell.get_code();
             if (that.notebook_load_re.test(code)) {
+                // %notebook load
                 var code_parts = code.split(' ');
                 if (code_parts.length === 3) {
                     that.load_notebook(code_parts[2]);
                 };
             } else if (that.notebook_save_re.test(code)) {
+                // %notebook save
                 var code_parts = code.split(' ');
                 if (code_parts.length === 3) {
                     that.save_notebook(code_parts[2]);

IPython/frontend/html/notebook/static/js/notebook_main.js

@@ -34,5 +34,9 $(document).ready(function () {
     IPython.layout_manager.do_resize();
     IPython.pager.collapse();
     IPython.layout_manager.do_resize();
+
+    // These have display: none in the css file and are made visible here to prevent FLOUC.
+    $('div#header').css('display','block');
+    $('div#notebook_app').css('display','block');
 });