Merge pull request #13872 from grafana/css-loading-sync

Revert to sync loading of css, sometimes js loaded before css which c…

Merge pull request #13872 from grafana/css-loading-sync
Revert to sync loading of css, sometimes js loaded before css which c…
befee108 · Torkel Ödegaard · GitHub · 2481d19d · 2dde2c4f · befee108
Commit befee108 authored Oct 29, 2018 by Torkel Ödegaard Committed by GitHub Oct 29, 2018
Hide whitespace changes
Inline Side-by-side

Showing with 4 additions and 23 deletions

public/views/index.template.html
+4 -23

No files found.
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -14,6 +14,9 @@
  <link rel="icon" type="image/png" href="public/img/fav32.png">
  <link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28">
  <link rel="apple-touch-icon" sizes="180x180" href="public/img/apple-touch-icon.png">
+
+  <link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]+[[ .BuildCommit ]]">
+
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="msapplication-TileColor" content="#2b5797">
@@ -23,13 +26,6 @@
 <body class="theme-[[ .Theme ]]">

  <style>
-    body {
-      margin: 0;
-      height: 100%;
-      width: 100%;
-      position: absolute;
-    }
-
    .preloader {
      height: 100%;
      flex-direction: column;
@@ -38,14 +34,6 @@
      align-items: center;
    }

-    .theme-light .preloader {
-      background: linear-gradient(-60deg, #f7f8fa, #f5f6f9 70%, #f7f8fa 98%);
-    }
-
-    .theme-dark .preloader {
-      background: linear-gradient(180deg, #222426 10px, #161719 100px);
-    }
-
    .preloader__enter {
      opacity: 0;
      animation-name: preloader-fade-in;
@@ -253,14 +241,7 @@
      navTree: [[.NavTree]]
    };

-    // load css async
-    var myCSS = document.createElement("link");
-    myCSS.rel = "stylesheet";
-    myCSS.href = "public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]+[[ .BuildCommit ]]";
-
-    // insert it at the end of the head in a legacy-friendly manner
-    document.head.insertBefore(myCSS, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);
-    // switch loader to show all has loaded
+		// In case the js files fails to load the code below will show an info message.
    window.onload = function() {
      var preloader = document.getElementsByClassName("preloader");
      if (preloader.length) {