small UI improvement to keycloak loading state

PilotDataPlatform · Sep 6, 2023 · 0bb98a4 · 0bb98a4
1 parent a1bac7d
commit 0bb98a4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/modules/components/src/utils/KeyCloak/KeyCloakMiddleware.js b/modules/components/src/utils/KeyCloak/KeyCloakMiddleware.js
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { ReactKeycloakProvider as KeycloakProvider } from '@react-keycloak/web';
+import { Spin } from 'antd';
+import './keycloak.css';
 
 import { keycloak } from './config';
 import { tokenTimer } from './tokenTimer';
@@ -62,7 +64,11 @@ const KeyCloakMiddleWare = ({ children }) => {
         checkLoginIframe: false,
       }}
     >
-      {!isKeycloakReady ? <div>Loading Keycloak...</div> : children}
+      {!isKeycloakReady ? (
+        <Spin className="keycloak__loading" tip="Loading Keycloak" size="large" />
+      ) : (
+        children
+      )}
     </KeycloakProvider>
   );
 };

diff --git a/modules/components/src/utils/KeyCloak/keycloak.css b/modules/components/src/utils/KeyCloak/keycloak.css
@@ -0,0 +1,8 @@
+.keycloak__loading {
+  display: block;
+  margin: 35vh auto 0 auto;
+}
+
+.keycloak__loading .ant-spin-text {
+  margin-top: 4px;
+}