mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
e0f7eab37d
## 📓 Summary
This work extracts the utility function `dynamic`, previously duplicated
in the `log_explorer` and `logs_shared` plugins, into the
`@kbn/shared-ux-utility` package.
The component is purely dedicated to lazy loading a component reducing
the noise created by React.lazy+Suspense, here are some usage examples
from the docs:
```tsx
// Lazy load a component
const Header = dynamic(() => import('./components/header'))
// Lazy load a component and use a fallback component while loading
const Header = dynamic(() => import('./components/header'), {fallback: <EuiLoadingSpinner />})
// Lazy load a named exported component
const MobileHeader = dynamic<MobileHeaderProps>(() => import('./components/header').then(mod => ({default: mod.MobileHeader})))
function App () {
return <Header />
}
```
The component is tested and documented to ensure the lazy loading is
performed:
```txt
dynamic
✓ should create a lazy loaded component starting from a dynamic default import
✓ should create a lazy loaded component starting from a dynamic named import
✓ should accept an optional "fallback" node to display while loading the component
the created lazy loaded component
✓ should forward the ref property if provided
✓ should be properly typed respecting the original properties contract
```
---------
Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
12 lines
611 B
TypeScript
12 lines
611 B
TypeScript
/*
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
* or more contributor license agreements. Licensed under the Elastic License
|
|
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
* Side Public License, v 1.
|
|
*/
|
|
|
|
export { Fallback } from './src/fallback';
|
|
export { getClosestLink, hasActiveModifierKey } from './src/utils';
|
|
export { withSuspense, type WithSuspenseExtendedDeps } from './src/with_suspense';
|
|
export { dynamic, type DynamicOptions } from './src/dynamic';
|