diff --git a/modules/components/src/utils/KeyCloak/KeyCloakMiddleware.js b/modules/components/src/utils/KeyCloak/KeyCloakMiddleware.js
index 09b4d471e..0a61ccce5 100644
--- 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
new file mode 100644
index 000000000..c8540a4c4
--- /dev/null
+++ 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;
+}