diff --git a/web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx b/web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx
index 6fb06a94..5900642d 100644
--- a/web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx
+++ b/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">
-      {appInfo ? (
-        <OpenAppInfoProvider appInfo={appInfo} refresh={refresh}>
-          <AppInfo />
-        </OpenAppInfoProvider>
-      ) : (
-        <>
-          <Button
-            style={{ marginBottom: 4 }}
-            type="primary"
-            onClick={handleCreateOpenApp}
-          >
-            创建应用
-          </Button>
-          <Table columns={columns} dataSource={allApps} pagination={false} />
-        </>
-      )}
-    </div>
+    <Loading spinning={loading}>
+      <div className="plugin-openapi-main-panel">
+        {appInfo ? (
+          <OpenAppInfoProvider appInfo={appInfo} refresh={refresh}>
+            <AppInfo />
+          </OpenAppInfoProvider>
+        ) : (
+          <>
+            <Button
+              style={{ marginBottom: 4 }}
+              type="primary"
+              onClick={handleCreateOpenApp}
+            >
+              创建应用
+            </Button>
+            <Table columns={columns} dataSource={allApps} pagination={false} />
+          </>
+        )}
+      </div>
+    </Loading>
   );
 });
 OpenApiMainPanel.displayName = 'OpenApiMainPanel';
diff --git a/web/src/components/Loading.tsx b/web/src/components/Loading.tsx
new file mode 100644
index 00000000..b3ea10ca
--- /dev/null
+++ b/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';
diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx
index 41c646e4..48b4def3 100644
--- a/web/src/plugin/component/index.tsx
+++ b/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';