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>
|
||
|---|---|---|
| .. | ||
| src | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.mdx | ||
| setup_tests.ts | ||
| tsconfig.json | ||
--- id: kibSharedUXUtility slug: /kibana-dev-docs/shared-ux/packages/kbn-shared-ux-utility title: Shared UX Utilities description: The `@kbn/shared-ux-utility` package contains a set of React, DOM and other utilities. date: 2022-03-11 tags: ['kibana', 'dev', 'sharedUX'] --- ## About Shared UX Utility At present, this package is currently a "catch-all" for universally-shared utilities. View the specific documentation for each utility for > Important: do not add new utilities to this package without considering if a different home is more appropriate. Reach out to the Shared UX team for help.