Flash of Unstyled Content fix

2 files changed, 47 insertions, 0 deletions

diff --git a/static/js/fouc.js b/static/js/fouc.js
new file mode 100644
index 00000000..190e8d37
--- /dev/null
+++ b/static/js/fouc.js
@@ -0,0 +1,36 @@
+function getScript(url, integrity, crossorigin){
+    var script = document.createElement("script")
+    script.type = "text/javascript";
+    script.src = url;
+    script.defer = true;
+    script.integrity = integrity;
+    script.crossOrigin = crossorigin;
+    document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+function setClass(selector, myClass) {
+    element = document.querySelector(selector);
+    console.log(element)
+    element.className = myClass;
+}
+
+function removeClass(selector, myClass) {
+    element = document.querySelector(selector);
+    var reg = new RegExp('(^| )'+myClass+'($| )','g');
+    element.className = element.className.replace(reg,' ');
+}
+
+// hide the html when the page loads, but only if js is turned on.
+setClass('html', 'prevent_fouc');
+
+// when the DOM has finished loading, unhide the html
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        removeClass('html', 'prevent_fouc');
+        getScript(
+            'https://pro.fontawesome.com/releases/v5.0.9/js/all.js',
+            'sha384-DtPgXIYsUR6lLmJK14ZNUi11aAoezQtw4ut26Zwy9/6QXHH8W3+gjrRDT+lHiiW4',
+            'anonymous'
+        )
+    }
+}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 9900a817..5c63f106 100644
--- a/static/style.css
+++ b/static/style.css
@@ -107,4 +107,15 @@ footer div.uk-section div.uk-text-center {
 
 .uk-button-darkish:hover {
     background: rgba(0, 0, 0, 0.22);
+}
+
+/* Flash of Unstyled Content fixes */
+.prevent_fouc {
+    display: none;
+}
+
+div.navbar-padding {
+    padding-left: 40px;
+    padding-right: 40px;
+    box-sizing: content-box;
 }
\ No newline at end of file