diff --git a/src/components/ChartKit.tsx b/src/components/ChartKit.tsx index 25f9666c..fb2540e5 100644 --- a/src/components/ChartKit.tsx +++ b/src/components/ChartKit.tsx @@ -48,7 +48,7 @@ const ChartKitComponent = (props: ChartKitComponentProps ); return ( - }> + }>
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx index b5a5357b..b7d3cc1f 100644 --- a/src/components/Loader/Loader.tsx +++ b/src/components/Loader/Loader.tsx @@ -1,14 +1,22 @@ import React from 'react'; import {Loader as BaseLoader, LoaderProps as BaseLoaderProps} from '@gravity-ui/uikit'; import {block} from '../../utils/cn'; +import type {ChartKitRenderPluginLoader} from '../../types'; import './Loader.scss'; const b = block('loader'); -type LoaderProps = BaseLoaderProps; +type LoaderProps = BaseLoaderProps & {renderPluginLoader?: ChartKitRenderPluginLoader}; + +export const Loader = ({renderPluginLoader, ...props}: LoaderProps) => { + const pluginLoader = renderPluginLoader?.(); + + // React.Suspense complains about possible undefined in "fallback" property + if (typeof pluginLoader !== 'undefined') { + return pluginLoader as React.JSX.Element; + } -export const Loader = (props: LoaderProps) => { return (
diff --git a/src/types/index.ts b/src/types/index.ts index 4b55df50..68a2b96d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -33,6 +33,8 @@ export type ChartKitOnChartLoad = { export type ChartKitOnError = (data: {error: any}) => void; +export type ChartKitRenderPluginLoader = () => React.ReactNode; + export type ChartKitProps = { type: T; data: ChartKitWidget[T]['data']; @@ -48,7 +50,7 @@ export type ChartKitProps = { /** Used to render user's error component */ renderError?: RenderError; /** Used to render user's plugin loader component */ - renderPluginLoader?: () => React.ReactNode; + renderPluginLoader?: ChartKitRenderPluginLoader; } & { [key in keyof Omit]: ChartKitWidget[T][key]; };