chore: speech to text

src/pages/playground/components/thumb-img.tsx

@@ -1,5 +1,6 @@
 import AutoImage from '@/components/auto-image';
 import { CloseCircleOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
 import _ from 'lodash';
 import React, { useCallback } from 'react';
 import '../style/thumb-img.less';
@@ -7,11 +8,13 @@ import '../style/thumb-img.less';
 const ThumbImg: React.FC<{
   dataList: any[];
   editable?: boolean;
-  onDelete: (uid: number) => void;
-}> = ({ dataList, editable, onDelete }) => {
+  onDelete?: (uid: number) => void;
+  loading?: boolean;
+  style?: React.CSSProperties;
+}> = ({ dataList, editable, onDelete, loading, style }) => {
   const handleOnDelete = useCallback(
     (uid: number) => {
-      onDelete(uid);
+      onDelete?.(uid);
     },
     [onDelete]
   );
@@ -21,30 +24,54 @@ const ThumbImg: React.FC<{
   }
 
   return (
-    <div className="thumb-list-wrap">
-      {_.map(dataList, (item: any) => {
-        return (
-          <span
-            key={item.uid}
-            className="thumb-img"
-            style={{
-              width: item.width,
-              height: item.height
-            }}
-          >
-            <span className="img">
-              <AutoImage src={item.dataUrl} height={100} />
-            </span>
+    <>
+      {
+        <div className="thumb-list-wrap" style={{ ...style }}>
+          {_.map(dataList, (item: any) => {
+            return (
+              <span
+                key={item.uid}
+                className="thumb-img"
+                style={{
+                  width: item.width || 100,
+                  height: item.height || 100
+                }}
+              >
+                <span className="img">
+                  {loading ? (
+                    <span
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        border: '1px solid var(--ant-color-split)',
+                        borderRadius: 'var(--border-radius-base)'
+                      }}
+                    >
+                      <Spin
+                        className="flex-center justify-center"
+                        style={{ width: '100%', height: '100%' }}
+                      ></Spin>
+                    </span>
+                  ) : (
+                    <AutoImage src={item.dataUrl} height={item.height || 100} />
+                  )}
+                </span>
 
-            {editable && (
-              <span className="del" onClick={() => handleOnDelete(item.uid)}>
-                <CloseCircleOutlined />
+                {editable && (
+                  <span
+                    className="del"
+                    onClick={() => handleOnDelete(item.uid)}
+                  >
+                    <CloseCircleOutlined />
+                  </span>
+                )}
               </span>
-            )}
-          </span>
-        );
-      })}
-    </div>
+            );
+          })}
+        </div>
+      }
+    </>
   );
 };