perf: 修改3个设备树组件初始骨架屏问题

packages/base-components/DeviceTree/src/index.js

 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Input, Tree, Divider, ConfigProvider } from 'antd';
+import { Input, Tree, Divider, ConfigProvider, Skeleton } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import Empty from '@wisdom-components/empty';
 import './index.less';
 
 const DeviceTree = (props) => {
   const { prefix, placeholder, treeData, first, onSearch } = props;
-  console.log(first, treeData)
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('device-tree');
 
@@ -23,8 +22,16 @@ const DeviceTree = (props) => {
       />
       <Divider />
       <div className={classNames(`${prefixCls}-content`)}>
-        {!!treeData.length && <Tree {...props} />}
-        {!treeData.length && !first ? <Empty /> : ''}
+        {/* {!!treeData.length && <Skeleton loading={first} active><Tree {...props} /></Skeleton>}
+                {!treeData.length && !first ? <Empty /> : ''} */}
+        {
+          first || !!treeData.length ?
+            <Skeleton loading={first} active>
+              <Tree {...props} />
+            </Skeleton>
+            :
+            <Empty />
+        }
       </div>
     </div>
   );

packages/extend-components/EC_DeviceTree/src/index.js

 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Spin, Input, Tree, Divider, message, Pagination, ConfigProvider } from 'antd';
+import { Spin, Input, Tree, Divider, message, Pagination, ConfigProvider, Skeleton } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import Empty from '@wisdom-components/empty';
 import './index.less';
@@ -127,8 +127,8 @@ const DeviceTree = (props) => {
       />
       <Divider className={classNames(`${prefixCls}-divider`)} />
       <div className={classNames(`${prefixCls}-content`)}>
-        <Spin delay={1000} spinning={loading}>
-          {!!treeData.length && (
+        {loading || (!!treeData.length) ? (
+          <Skeleton loading={loading} active>
             <Tree
               checkedKeys={checkedKeys}
               expandedKeys={expandedKeys}
@@ -140,9 +140,9 @@ const DeviceTree = (props) => {
               checkStrictly
               {...props}
             />
-          )}
-          {!treeData.length && !loading && <Empty />}
-        </Spin>
+          </Skeleton>
+
+        ) : <Empty />}
       </div>
       {pagination && (
         <div className={classNames(`${prefixCls}-pagination`)}>
@@ -170,8 +170,8 @@ DeviceTree.defaultProps = {
   placeholder: '搜索设备名称',
   pagination: true,
   serviceParams: {},
-  onTreeCheck: () => {},
-  onTreeSelect: () => {},
+  onTreeCheck: () => { },
+  onTreeSelect: () => { },
 };
 
 DeviceTree.propTypes = {

packages/extend-components/EC_DeviceTreeGroup/src/index.js

 import PropTypes from 'prop-types';
 
-import { Input, Layout, Spin, Tree, ConfigProvider } from 'antd';
+import { Input, Layout, Spin, Tree, ConfigProvider, Skeleton } from 'antd';
 // import { SearchOutlined } from '@ant-design/icons';
 import React, { useCallback, useEffect, useMemo, useRef, useState, useContext } from 'react';
 import PandaEmpty from '@wisdom-components/empty';
@@ -249,8 +249,9 @@ const DeviceTree = (props) => {
     <div className={classNames(prefixCls, 'wkt-scroll-light')}>
       <Input.Search placeholder="搜索设备名称" onSearch={onSearch} allowClear />
       <div className={classnames(`${prefixCls}-tree-wrap`, 'wkt-scroll-light-plus')} ref={ref}>
-        <Spin spinning={loading}>
-          {data && data.length ? (
+        {/* <Spin spinning={loading}> */}
+        {loading || (data && data.length) ? (
+          <Skeleton loading={loading} active>
             <Tree
               checkStrictly
               checkedKeys={checkedKeys}
@@ -263,10 +264,12 @@ const DeviceTree = (props) => {
               onCheck={handleCheck}
               onSelect={handleSelect}
             />
-          ) : (
-            <PandaEmpty />
-          )}
-        </Spin>
+          </Skeleton>
+
+        ) : (
+          <PandaEmpty />
+        )}
+        {/* </Spin> */}
       </div>
     </div>
   );
@@ -283,10 +286,10 @@ DeviceTree.defaultProps = {
   selectable: false,
   checkable: false,
   keepChecked: false,
-  onSelect: () => {},
-  onCheck: () => {},
-  setDeviceList: () => {},
-  setSearchStr: () => {},
+  onSelect: () => { },
+  onCheck: () => { },
+  setDeviceList: () => { },
+  setSearchStr: () => { },
 };
 
 DeviceTree.propTypes = {