From 04f3c001f1ce1f8e8fb4c9d645d30ffde63edd84 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 6 Aug 2020 11:37:24 +0200
Subject: [PATCH] use patternfly style loading spinner

---
 public/index.html | 54 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 10 deletions(-)
diff --git a/public/index.html b/public/index.html
index 935b679fbc..beaf195caa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,20 +8,54 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="Web site to manage keycloak" />
   <title>Keycloak Administration Console</title>
+
+  <style>
+    .container,
+    .container-fluid,
+    #load-container {
+      padding: 0;
+      margin: 0;
+    }
+
+    .container,
+    .container-fluid,
+    #load-container {
+      width: 100vw;
+    }
+
+    .keycloak__loading-container {
+      height: 100vh;
+      width: 100%;
+      background-color: #f0f0f0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin: 0;
+    }
+
+    #loading-text {
+      z-index: 1000;
+      font-size: 20px;
+      font-weight: 600;
+      padding-top: 32px;
+    }
+  </style>
 </head>
 
 <body style="height: 100%;">
   <div id="app" style="height: 100%">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-        style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px"
-        height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-        <path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#5DBCD2" stroke="none"
-          transform="rotate(16.3145 50 51)">
-          <animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1"
-            values="0 50 51;360 50 51"></animateTransform>
-        </path>
-      </svg>
+    <div class="container container-fluid" id="load-container">
+      <div class="keycloak__loading-container">
+        <span class="pf-c-spinner pf-m-xl" role="progressbar" aria-valuetext="Loading...">
+          <span class="pf-c-spinner__clipper"></span>
+          <span class="pf-c-spinner__lead-ball"></span>
+          <span class="pf-c-spinner__tail-ball"></span>
+        </span>
+        <div>
+          <p id="loading-text">Loading the admin console</p>
+        </div>
+      </div>
     </div>
   </div>
 
