Separate LoadingSpinnerFullPage to its own component

Source/DesignSystem/atoms/LoadingSpinner/LoadingSpinner.tsx

@@ -2,20 +2,15 @@
 // 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';
 
+/**
+ * The {@link LoadingSpinner} component is used to display a loading spinner.
+ * @param {CircularProgress} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinner} component.
+ */
 export const LoadingSpinner = (props: CircularProgressProps) =>
     <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) =>
-    createPortal(
-        <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
-            <LoadingSpinner {...props} />
-        </Box>,
-        document.body,
-    );

Source/DesignSystem/atoms/LoadingSpinner/index.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Dolittle. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-export { FullPageLoadingSpinner, LoadingSpinner } from './LoadingSpinner';
+export { LoadingSpinner } from './LoadingSpinner';

Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.stories.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { componentStories, LoadingSpinnerFullPage } from '../../index';
+
+const { metadata, createStory } = componentStories(LoadingSpinnerFullPage);
+
+// TODO: Update component to improve text.
+
+metadata.parameters = {
+    docs: {
+        description: {
+            component: `A loading spinner is a progress indicator used to inform users about the status of ongoing processes, 
+        such as loading data or submitting a form. Provide a descriptive label that indicates the status to the user. 
+        By default, loading spinners are in an indeterminate state.` },
+    },
+    layout: 'centered',
+};
+
+export default metadata;
+
+export const Default = createStory();

Source/DesignSystem/atoms/LoadingSpinnerFullPage/LoadingSpinnerFullPage.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) Dolittle. All rights reserved.
+// 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, CircularProgressProps } from '@mui/material';
+
+import { LoadingSpinner } from '../../index';
+
+/**
+ * The {@link LoadingSpinnerFullPage} component is used to display a loading spinner full page.
+ * @param {LoadingSpinnerFullPage} props - The {@link CircularProgressProps}.
+ * @returns A {@link LoadingSpinnerFullPage} component.
+ */
+export const LoadingSpinnerFullPage = (props: CircularProgressProps) =>
+    createPortal(
+        <Box sx={{ width: 1, height: 1, position: 'absolute', top: 0, left: 0, zIndex: '9999', backgroundColor: '#191A2150' }}>
+            <LoadingSpinner {...props} />
+        </Box>,
+        document.body,
+    );

Source/DesignSystem/atoms/LoadingSpinnerFullPage/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Dolittle. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export { LoadingSpinnerFullPage } from './LoadingSpinnerFullPage';

Source/DesignSystem/index.ts

@@ -17,7 +17,8 @@ export * from './atoms/Forms';
 export { Icon, IconProps } from './atoms/Icon';
 export { IconButton, IconButtonProps } from './atoms/IconButton';
 export { Link, LinkProps } from './atoms/Link';
-export { FullPageLoadingSpinner, LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinner } from './atoms/LoadingSpinner';
+export { LoadingSpinnerFullPage } from './atoms/LoadingSpinnerFullPage';
 export { StatusIndicator, StatusIndicatorProps } from './atoms/StatusIndicator';
 export { Summary } from './atoms/Metrics';
 export { Tabs } from './atoms/Tabs';

Source/SelfService/Web/applications/microservice/deployMicroservice/deployMicroservice.tsx

@@ -10,7 +10,7 @@ import { Guid } from '@dolittle/rudiments';
 
 import { Typography } from '@mui/material';
 
-import { Button, Form, FullPageLoadingSpinner } from '@dolittle/design-system';
+import { Button, Form, LoadingSpinnerFullPage } from '@dolittle/design-system';
 
 import { saveSimpleMicroservice } from '../../stores/microservice';
 
@@ -91,7 +91,8 @@ export const DeployMicroservice = ({ application }: DeployMicroserviceProps) =>
 
     return (
         <>
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
+
             <Typography variant='h1' sx={{ mt: 3, mb: 4 }}>Deploy Base Microservice</Typography>
 
             <Form<MicroserviceFormParameters>

Source/SelfService/Web/applications/microservice/microserviceDetails/configurationFilesSection/setupSection/setupSection.tsx

@@ -8,7 +8,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Box } from '@mui/material';
 
-import { AlertDialog, Button, Form, FullPageLoadingSpinner } from '@dolittle/design-system';
+import { AlertDialog, Button, Form, LoadingSpinnerFullPage } from '@dolittle/design-system';
 
 import { canDeleteMicroservice, deleteMicroservice, MicroserviceStore } from '../../../../stores/microservice';
 
@@ -99,7 +99,7 @@ export const SetupSection = ({ application, currentMicroservice }: SetupSectionP
 
     return (
         <>
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
 
             <AlertDialog
                 id='delete-microservice'

Source/SelfService/Web/applications/microservice/microserviceDetails/healthStatus/healthStatus.tsx

@@ -5,7 +5,7 @@ import React, { useMemo, useState } from 'react';
 
 import { MicroserviceStore } from '../../../stores/microservice';
 
-import { AlertBox, AlertBoxErrorMessage, Button, FullPageLoadingSpinner, Graph } from '@dolittle/design-system';
+import { AlertBox, AlertBoxErrorMessage, Button, Graph } from '@dolittle/design-system';
 
 import { ContainerStatusInfo, HttpResponsePodStatus } from '../../../../apis/solutions/api';
 

Source/SelfService/Web/spaces/applications/applicationCreateDialog.tsx

@@ -9,7 +9,7 @@ import { Guid } from '@dolittle/rudiments';
 
 import { Stack, Typography } from '@mui/material';
 
-import { Checkbox, DialogForm, FullPageLoadingSpinner, Input } from '@dolittle/design-system';
+import { Checkbox, DialogForm, LoadingSpinnerFullPage, Input } from '@dolittle/design-system';
 
 import { createApplication, HttpApplicationRequest } from '../../apis/solutions/application';
 
@@ -90,7 +90,7 @@ export const ApplicationCreateDialog = ({ isOpen, onClose }: ApplicationCreateDi
             onCancel={onClose}
             onConfirm={handleSpaceCreate}
         >
-            {isLoading && <FullPageLoadingSpinner />}
+            {isLoading && <LoadingSpinnerFullPage />}
 
             <Typography variant='body1' sx={{ my: 2 }}>Provide a name for your new application.</Typography>
             <Input