Add padding around loading spinner (#215418)

## Summary

Papercut in the add panel flyout where the loading spinner sits flush
against the edge of the flyout container.

_Before_
<img width="560"
src="https://github.com/user-attachments/assets/fc56aaf5-c715-4628-b31d-8a013bc06b99"
/>

_After_
<img width="560"
src="https://github.com/user-attachments/assets/2add8305-de39-49b6-b400-4a27102b2a8e"
/>


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.
N/A

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Ryan Keairns 2025-03-20 20:18:13 -07:00 committed by GitHub
parent 7d65957683
commit fc17693bdc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 1 deletions

View file

@ -11,6 +11,7 @@ import React, { Suspense } from 'react';
import { OverlayRef } from '@kbn/core/public';
import { EuiLoadingSpinner, htmlIdGenerator } from '@elastic/eui';
import { euiThemeVars } from '@kbn/ui-theme';
import { toMountPoint } from '@kbn/react-kibana-mount';
import { CanAddNewPanel } from '@kbn/presentation-containers';
@ -34,7 +35,7 @@ export const openAddFromLibraryFlyout = ({
const flyoutRef = core.overlays.openFlyout(
toMountPoint(
<Suspense fallback={<EuiLoadingSpinner />}>
<Suspense fallback={<EuiLoadingSpinner css={{ margin: euiThemeVars.euiSizeM }} />}>
<LazyAddPanelFlyout container={container} modalTitleId={modalTitleId} />
</Suspense>,
core

View file

@ -23,6 +23,7 @@
"@kbn/presentation-containers",
"@kbn/react-kibana-mount",
"@kbn/analytics",
"@kbn/ui-theme",
],
"exclude": ["target/**/*"]
}