feat: 增加容器级别的Loading

web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx

@@ -5,7 +5,13 @@ import {
   openModal,
   closeModal,
 } from '@capital/common';
-import { LoadingSpinner, Space, Table, Button } from '@capital/component';
+import {
+  LoadingSpinner,
+  Space,
+  Table,
+  Button,
+  Loading,
+} from '@capital/component';
 import { OpenApp } from './types';
 import AppInfo from './AppInfo';
 import { OpenAppInfoProvider } from './context';
@@ -56,29 +62,27 @@ const OpenApiMainPanel: React.FC = React.memo(() => {
     );
   };
 
-  if (loading) {
-    return <LoadingSpinner />;
-  }
-
   return (
-    <div className="plugin-openapi-main-panel">
+    <Loading spinning={loading}>
-      {appInfo ? (
+      <div className="plugin-openapi-main-panel">
-        <OpenAppInfoProvider appInfo={appInfo} refresh={refresh}>
+        {appInfo ? (
-          <AppInfo />
+          <OpenAppInfoProvider appInfo={appInfo} refresh={refresh}>
-        </OpenAppInfoProvider>
+            <AppInfo />
-      ) : (
+          </OpenAppInfoProvider>
-        <>
+        ) : (
-          <Button
+          <>
-            style={{ marginBottom: 4 }}
+            <Button
-            type="primary"
+              style={{ marginBottom: 4 }}
-            onClick={handleCreateOpenApp}
+              type="primary"
-          >
+              onClick={handleCreateOpenApp}
-            创建应用
+            >
-          </Button>
+              创建应用
-          <Table columns={columns} dataSource={allApps} pagination={false} />
+            </Button>
-        </>
+            <Table columns={columns} dataSource={allApps} pagination={false} />
-      )}
+          </>
-    </div>
+        )}
+      </div>
+    </Loading>
   );
 });
 OpenApiMainPanel.displayName = 'OpenApiMainPanel';

web/src/components/Loading.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LoadingSpinner } from './LoadingSpinner';
+
+interface LoadingProps {
+  spinning: boolean;
+}
+export const Loading: React.FC<LoadingProps> = React.memo((props) => {
+  const { spinning = false } = props;
+
+  return (
+    <div className="relative">
+      {spinning && (
+        <div className="absolute inset-0 z-10 bg-white bg-opacity-20 flex justify-center items-center">
+          <LoadingSpinner />
+        </div>
+      )}
+
+      {props.children}
+    </div>
+  );
+});
+Loading.displayName = 'Loading';

web/src/plugin/component/index.tsx

@@ -17,3 +17,4 @@ export { PillTabs, PillTabPane } from '@/components/PillTabs';
 export { LoadingSpinner } from '@/components/LoadingSpinner';
 export { WebFastForm } from '@/components/WebFastForm';
 export { FullModalField } from '@/components/FullModal/Field';
+export { Loading } from '@/components/Loading';