From 5ff5c5c2450d1203f285fdf77fd0496cd6c05f20 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Mon, 27 Aug 2018 13:54:26 +0200
Subject: [PATCH] added a loading view with a spining grafana logo

---
 public/views/index.template.html | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)
diff --git a/public/views/index.template.html b/public/views/index.template.html
index f4c5d183fc8..491846f8c0f 100644
--- a/public/views/index.template.html
+++ b/public/views/index.template.html
@@ -20,10 +20,25 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="msapplication-TileColor" content="#2b5797">
   <meta name="msapplication-config" content="public/img/browserconfig.xml">
+  <style>
+    @keyframes rotate-icon {from {transform: rotateZ(0deg);}to {transform: rotateZ(360deg);}}
+    .rotating-logo {
+    animation-name: rotate-icon;
+    animation-duration: 1.1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: cubic-bezier(0.4, 0.35, 0.5, 0.55)
+    }
+  </style>
 </head>
 
-<body ng-cloak class="theme-[[ .Theme ]]">
-  <grafana-app class="grafana-app">
+<body  class="theme-[[ .Theme ]]">
+  <div class="page-loader" style="display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column">
+    <div class="rotating-logo">
+      <img src="public/img/grafana_icon.svg" style="width: 60px">
+    </div>
+    <div style="margin-top: 14px">LOADING GRAFANA</div>
+  </div>
+  <grafana-app class="grafana-app" ng-cloak>
 
     <sidemenu class="sidemenu"></sidemenu>
 
@@ -115,4 +130,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
