fix(ui): center loading screen in tracker debug, import, and export modals

Author: azasypkin

components/retrack

@@ -11,7 +11,6 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiInMemoryTable,
-  EuiLoadingSpinner,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -24,6 +23,7 @@ import {
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { PageLoadingState } from '../components';
 import { getUserScripts, getUserSecrets } from '../model';
 import type { ExportParams } from '../model/user_data_export';
 import {
@@ -538,23 +538,19 @@ export default function ExportDataModal({ addToast, onClose }: Props) {
       <EuiModalHeader>
         <EuiModalHeaderTitle>Export data</EuiModalHeaderTitle>
       </EuiModalHeader>
-      <EuiModalBody>
-        {loading ? (
-          <EuiFlexGroup justifyContent="center">
-            <EuiFlexItem grow={false}>
-              <EuiLoadingSpinner size="l" />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ) : (
+      {loading ? (
+        <PageLoadingState />
+      ) : (
+        <EuiModalBody>
           <EuiBasicTable
             items={visibleRows}
             responsiveBreakpoint={false}
             itemId="id"
             columns={outerColumns}
             itemIdToExpandedRowMap={expandedRows}
           />
-        )}
-      </EuiModalBody>
+        </EuiModalBody>
+      )}
       <EuiModalFooter>
         <EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
         <EuiButton

components/secutils-webui/src/app_container/export_data_modal.tsx

@@ -14,7 +14,6 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiInMemoryTable,
-  EuiLoadingSpinner,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -27,6 +26,7 @@ import {
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { PageLoadingState } from '../components';
 import type {
   ApplyDeletionSelections,
   ImportEntitySelection,
@@ -1020,17 +1020,7 @@ export default function ImportDataModal({ addToast, onClose, maxImportFileSize,
           {step === 'upload' ? 'Import data' : step === 'preview' ? 'Review import' : 'Import results'}
         </EuiModalHeaderTitle>
       </EuiModalHeader>
-      <EuiModalBody>
-        {loading ? (
-          <EuiFlexGroup justifyContent="center">
-            <EuiFlexItem grow={false}>
-              <EuiLoadingSpinner size="l" />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ) : (
-          content
-        )}
-      </EuiModalBody>
+      {loading ? <PageLoadingState /> : <EuiModalBody>{content}</EuiModalBody>}
       <EuiModalFooter>
         {step === 'upload' && (
           <>

components/secutils-webui/src/app_container/import_data_modal.tsx

@@ -11,7 +11,7 @@ export function PageLoadingState({ title = 'Loading…' }: PageLoadingStateProps
     <EuiFlexGroup
       direction={'column'}
       gutterSize={'s'}
-      style={{ height: '100%' }}
+      style={{ minHeight: '100%' }}
       alignItems="center"
       justifyContent="center"
     >

components/secutils-webui/src/components/page_loading_state.tsx

@@ -2,11 +2,9 @@ import {
   EuiBadge,
   EuiCallOut,
   EuiCodeBlock,
-  EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
   EuiImage,
-  EuiLoadingLogo,
   EuiModal,
   EuiModalBody,
   EuiModalHeader,
@@ -29,7 +27,7 @@ import type {
   ScriptDebugInfo,
 } from './tracker_debug_types';
 import { buildPipelineStages } from './tracker_debug_types';
-import { Logo } from '../../../../components';
+import { PageLoadingState } from '../../../../components';
 import { type AsyncData, getApiRequestConfig, getErrorMessage, ResponseError } from '../../../../model';
 
 export interface TrackerDebugPanelProps {
@@ -609,20 +607,7 @@ export function TrackerDebugPanel({ isOpen, onClose, onStatusChange, buildDebugR
         <EuiModalHeaderTitle>Debug</EuiModalHeaderTitle>
       </EuiModalHeader>
       {result?.status === 'pending' ? (
-        <div
-          css={css`
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          `}
-        >
-          <EuiEmptyPrompt
-            icon={<EuiLoadingLogo logo={() => <Logo size={40} />} size="l" />}
-            titleSize="xs"
-            title={<h2>Running debug pipeline…</h2>}
-          />
-        </div>
+        <PageLoadingState title="Running debug pipeline…" />
       ) : (
         <EuiModalBody style={{ minHeight: 0 }}>
           {result?.status === 'failed' ? (