From 9554d756b8db2a40a416c2d9e7de3bff8861c29f Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Fri, 23 Jun 2023 15:40:43 +0200
Subject: [PATCH] chore: Center the Spinner in the loading screen and add
 Loading message

---
 packages/hawtio/src/ui/page/HawtioLoading.tsx | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/hawtio/src/ui/page/HawtioLoading.tsx b/packages/hawtio/src/ui/page/HawtioLoading.tsx
index 8f11c47dc..72336a0c0 100644
--- a/packages/hawtio/src/ui/page/HawtioLoading.tsx
+++ b/packages/hawtio/src/ui/page/HawtioLoading.tsx
@@ -1,10 +1,29 @@
-import { Page, PageSection, Spinner } from '@patternfly/react-core'
+import { Grid, GridItem, Page, PageSection, Spinner, Text, TextContent, TextVariants } from '@patternfly/react-core'
 import React from 'react'
 
 export const HawtioLoading: React.FunctionComponent = () => (
   <Page>
-    <PageSection>
-      <Spinner isSVG aria-label='Loading Hawtio' />
-    </PageSection>
+    <Grid
+      hasGutter
+      style={{
+        display: 'flex',
+        height: '100vh',
+        width: '100vw',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <GridItem span={12}>
+        <Spinner diameter='60px' isSVG aria-label='Loading Hawtio' />
+      </GridItem>
+      <GridItem span={12}>
+        <TextContent>
+          <Text className={'--pf-global--Color--200'} component={TextVariants.h3}>
+            Loading ...
+          </Text>
+        </TextContent>
+      </GridItem>
+    </Grid>
   </Page>
 )