fix: allow to hide plugin loader by passing null by renderPluginLoader (

#340)

fix: allow hide plugin loader by passing null through renderPluginLoader

src/components/ChartKit.tsx

@@ -48,7 +48,7 @@ const ChartKitComponent = <T extends ChartKitType>(props: ChartKitComponentProps
     );
 
     return (
-        <React.Suspense fallback={renderPluginLoader?.() || <Loader />}>
+        <React.Suspense fallback={<Loader renderPluginLoader={renderPluginLoader} />}>
             <div className={b({mobile: isMobile}, 'chartkit-theme_common')}>
                 <ChartComponent ref={widgetRef} id={id} lang={lang} {...restProps} />
             </div>

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 (
         <div className={b()}>
             <BaseLoader {...props} />

src/types/index.ts

@@ -33,6 +33,8 @@ export type ChartKitOnChartLoad<T extends ChartKitType> = {
 
 export type ChartKitOnError = (data: {error: any}) => void;
 
+export type ChartKitRenderPluginLoader = () => React.ReactNode;
+
 export type ChartKitProps<T extends ChartKitType> = {
     type: T;
     data: ChartKitWidget[T]['data'];
@@ -48,7 +50,7 @@ export type ChartKitProps<T extends ChartKitType> = {
     /** 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], 'data' | 'widget'>]: ChartKitWidget[T][key];
 };