feat: loading template theme support

Author: lxfu1

packages/plots/src/components/base/index.tsx

@@ -28,7 +28,7 @@ export const BaseChart: ForwardRefExoticComponent<PropsWithoutRef<CommonConfig>
 
   return (
     <ErrorBoundary errorTemplate={errorTemplate}>
-      {loading && <ChartLoading loadingTemplate={loadingTemplate} />}
+      {loading && <ChartLoading loadingTemplate={loadingTemplate} theme={config.theme} loading={loading} />}
       <div className={className} style={containerStyle} ref={container} {...containerAttributes} />
     </ErrorBoundary>
   );

packages/util/src/rc/chart-loading.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
+import { ContainerConfig } from '../types';
 
-export interface ChartLoadingConfig {
+interface ChartLoadingConfig extends Pick<ContainerConfig, 'loadingTemplate' | 'loading'> {
   /**
    * @title 主题
    * @description 配置主题颜色
    */
-  theme?: string | object;
-  /**
-   * @title 加载模板
-   * @description 图表加载
-   */
-  loadingTemplate?: React.ReactElement;
+  theme?: string;
 }
 
-const shadowLoading = (ele: HTMLElement) => {
+const shadowLoading = (ele: HTMLElement, style = {}) => {
   if (typeof document === 'undefined') {
     return 'loading';
   }
+  let overStyle = "";
+  if (style) {
+    Object.keys(style).forEach((key) => {
+      overStyle += `${key}: ${style[key]};\n`;
+    });
+  }
   const shadowRoot = ele.attachShadow({ mode: 'open' });
   const shadowDiv = document.createElement('div');
   const shadowStyle = document.createElement('style');
@@ -34,6 +36,7 @@ const shadowLoading = (ele: HTMLElement) => {
     border-radius: 50%;
     background: #ccc;
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    ${overStyle}
   }
   .loading div:nth-child(1) {
     left: 8px;
@@ -82,12 +85,13 @@ const shadowLoading = (ele: HTMLElement) => {
   shadowRoot.appendChild(shadowDiv);
 };
 
-export const ChartLoading = ({ loadingTemplate, theme = 'light' }: ChartLoadingConfig) => {
+export const ChartLoading = ({ loadingTemplate, theme = 'light', loading }: ChartLoadingConfig) => {
   const shadow = React.useRef<HTMLDivElement>(null);
+  const { container = {}, icon = {} } = typeof loading === 'object' ? loading : {};
 
   React.useEffect(() => {
     if (!loadingTemplate && shadow.current) {
-      shadowLoading(shadow.current);
+      shadowLoading(shadow.current, icon);
     }
   }, []);
   const renderLoading = () => {
@@ -108,7 +112,8 @@ export const ChartLoading = ({ loadingTemplate, theme = 'light' }: ChartLoadingC
         left: 0,
         top: 0,
         zIndex: 99,
-        backgroundColor: theme === 'dark' ? 'rgb(20, 20, 20)' : 'rgb(255, 255, 255)',
+        background: theme === 'dark' ? 'rgb(20, 20, 20)' : 'rgb(255, 255, 255)',
+        ...container
       }}
     >
       {renderLoading()}

packages/util/src/types.ts

@@ -1,3 +1,13 @@
+export type LoadingStyle = {
+  /**
+   * @title icon style
+  */
+  icon?: React.CSSProperties;
+  /**
+   * @title container style
+  */
+  container?: React.CSSProperties;
+}
 export interface ContainerConfig {
   /**
    * @title 图表样式
@@ -28,7 +38,7 @@ export interface ContainerConfig {
    * @description.en_US Is it loading
    * @default.en_US false
    */
-  loading?: boolean;
+  loading?: boolean | LoadingStyle;
   /**
    * @title 加载模板
    * @description 加载模板

site/examples/statistics/line/demo/basic.js

@@ -18,6 +18,7 @@ const DemoLine = () => {
     data,
     xField: 'year',
     yField: 'value',
+    loading: true,
     point: {
       shapeField: 'square',
       sizeField: 4,
@@ -30,8 +31,13 @@ const DemoLine = () => {
     style: {
       lineWidth: 2,
     },
+    theme: 'dark',
   };
-  return <Line {...config} />;
+  return (
+    <div style={{ padding: 100, background: '#000' }}>
+      <Line {...config} />
+    </div>
+  );
 };
 
 createRoot(document.getElementById('container')).render(<DemoLine />);