feat: add <LoadingOnFirst />

web/src/components/Loading.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { LoadingSpinner } from './LoadingSpinner';
 
-interface LoadingProps {
+export interface LoadingProps {
   spinning: boolean;
   className?: string;
   style?: React.CSSProperties;

web/src/components/LoadingOnFirst.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo, useRef } from 'react';
+import { Loading, LoadingProps } from './Loading';
+
+interface LoadingOnFirstProps extends LoadingProps {
+  spinning: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+/**
+ * 类似于 <Loading /> 但是只会触发一次
+ */
+export const LoadingOnFirst: React.FC<LoadingOnFirstProps> = React.memo(
+  (props) => {
+    const lockRef = useRef(false);
+    const spinning = useMemo(() => {
+      if (lockRef.current === true) {
+        return false;
+      }
+
+      if (props.spinning === true) {
+        lockRef.current = true;
+      }
+
+      return props.spinning;
+    }, [props.spinning]);
+
+    return (
+      <Loading {...props} spinning={spinning}>
+        {props.children}
+      </Loading>
+    );
+  }
+);
+LoadingOnFirst.displayName = 'LoadingOnFirst';

web/src/components/modals/GroupDetail/Invite.tsx

@@ -11,9 +11,9 @@ import {
 import { Button, Table, Tooltip } from 'antd';
 import type { ColumnType } from 'antd/lib/table';
 import { UserName } from '@/components/UserName';
-import { Loading } from '@/components/Loading';
 import { openModal, openReconfirmModalP } from '@/components/Modal';
 import { CreateGroupInvite } from '../CreateGroupInvite';
+import { LoadingOnFirst } from '@/components/LoadingOnFirst';
 
 export const GroupInvite: React.FC<{
   groupId: string;
@@ -103,7 +103,7 @@ export const GroupInvite: React.FC<{
   );
 
   return (
-    <Loading spinning={loading}>
+    <LoadingOnFirst spinning={loading}>
       <div className="text-right mb-2">
         <Button type="primary" onClick={handleCreateInvite}>
           {t('创建邀请码')}
@@ -117,7 +117,7 @@ export const GroupInvite: React.FC<{
           hideOnSinglePage: true,
         }}
       />
-    </Loading>
+    </LoadingOnFirst>
   );
 });
 GroupInvite.displayName = 'GroupInvite';