message: use patternfly style loading spinner
diff: <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 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>
  - <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>
  + <p id="loading-text">Loading the admin console</p>
  + </div>
  + </div>
  </div>
  </div>
  