Make LoadingSpinner to fill full screen

dolittle · Sep 26, 2023 · a504987 · a504987
1 parent 705964d
commit a504987
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx b/Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx
@@ -2,16 +2,20 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import React from 'react';
+import { createPortal } from 'react-dom';
 
 import { Box, CircularProgress, CircularProgressProps } from '@mui/material';
 
 export const LoadingSpinner = (props: CircularProgressProps) =>
-    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 1, p: 2 }}>
+    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', p: 2 }}>
         <CircularProgress {...props} />
     </Box>;
 
 // TODO: Move this to a separate component.
 export const FullPageLoadingSpinner = (props: CircularProgressProps) =>
-    <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
-        <LoadingSpinner {...props} />
-    </Box>;
+    createPortal(
+        <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
+            <LoadingSpinner {...props} />
+        </Box>,
+        document.body,
+    );
diff --git a/Source/SelfService/Web/index.ejs b/Source/SelfService/Web/index.ejs
@@ -17,7 +17,7 @@
         <link rel="icon" href="favicon.ico">
     </head>
 
-    <body style="background-color: #0F1014">
+    <body style="background-color: #0F1014; position: relative">
         <div id="root"></div>
         <% if (htmlWebpackPlugin.options.metadata.server) { %>
             <!-- Webpack Dev Server reload -->