perf: update icon with placeholder

web/src/components/AvatarPicker.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import { closeModal, openModal } from './Modal';
 import { showToasts, t } from 'tailchat-shared';
 import { Avatar } from 'antd';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { ModalAvatarCropper } from './modals/AvatarCropper';
 import { isGIF } from '@/utils/file-helper';
 

web/src/components/AvatarUploader.tsx

@@ -1,5 +1,5 @@
 import { blobUrlToFile } from '@/utils/file-helper';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import clsx from 'clsx';
 import React, { useState } from 'react';
 import { uploadFile, UploadFileResult, useAsyncRequest } from 'tailchat-shared';

web/src/components/ChatBox/ChatInputBox/Addon.tsx

@@ -3,7 +3,7 @@ import {
   getMessageTextDecorators,
   pluginChatInputActions,
 } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Dropdown, Menu } from 'antd';
 import React from 'react';
 import { t } from 'tailchat-shared';

web/src/components/ChatBox/ChatMessageList/Item.tsx

@@ -14,7 +14,7 @@ import {
 import { Avatar } from '@/components/Avatar';
 import { useRenderPluginMessageInterpreter } from './useRenderPluginMessageInterpreter';
 import { getMessageRender, pluginMessageExtraParsers } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Divider, Dropdown } from 'antd';
 import { UserName } from '@/components/UserName';
 import clsx from 'clsx';

web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Menu } from 'antd';
 import React from 'react';
 import {

web/src/components/ChatBox/ChatMessageList/useRenderPluginMessageInterpreter.tsx

@@ -1,5 +1,5 @@
 import { messageInterpreter } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Popover } from 'antd';
 import React from 'react';
 import { useMemo } from 'react';

web/src/components/ChatBox/ChatReply.tsx

@@ -3,7 +3,7 @@ import { t, useChatBoxContext } from 'tailchat-shared';
 import _isNil from 'lodash/isNil';
 import { getMessageRender } from '@/plugin/common';
 import { UserName } from '../UserName';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 
 export const ChatReply: React.FC = React.memo(() => {
   const { replyMsg, clearReplyMsg } = useChatBoxContext();

web/src/components/FullModal/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import _isFunction from 'lodash/isFunction';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import clsx from 'clsx';
 
 /**

web/src/components/GroupSection.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React from 'react';
 import { useReducer } from 'react';
 

web/src/components/Icon.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { Icon as Iconify, IconProps } from '@iconify/react';
+
+export const Icon: React.FC<Omit<IconProps, 'ref'>> = React.memo((props) => {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <>
+      <Iconify {...props} onLoad={() => setLoaded(true)} />
+      {!loaded && <span style={{ width: '1em', height: '1em' }} />}
+    </>
+  );
+});
+Icon.displayName = 'Icon';

web/src/components/IconBtn.tsx

@@ -1,7 +1,7 @@
-import { Icon } from '@iconify/react';
 import { Button, ButtonProps, Tooltip } from 'antd';
 import React from 'react';
 import { isValidStr } from 'tailchat-shared';
+import { Icon } from './Icon';
 
 const btnClassName =
   'border-0 bg-black bg-opacity-20 text-white text-opacity-80 hover:text-opacity-100 hover:bg-opacity-60';

web/src/components/IsDeveloping.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { t } from 'tailchat-shared';
 import React from 'react';
 

web/src/components/Modal.tsx

@@ -7,7 +7,7 @@ import _isString from 'lodash/isString';
 import _noop from 'lodash/noop';
 import { PortalAdd, PortalRemove } from './Portal';
 import { Typography } from 'antd';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import { useIsMobile } from '@/hooks/useIsMobile';

web/src/components/SectionHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Dropdown } from 'antd';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import clsx from 'clsx';
 
 interface SectionHeaderProps {

web/src/components/Spinner.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React from 'react';
 
 export const Spinner: React.FC = React.memo(() => {

web/src/components/modals/GroupInvite.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Button, Typography } from 'antd';
 import React, { useState } from 'react';
 import {

web/src/components/modals/SettingsView/About.tsx

@@ -2,7 +2,7 @@ import { Typography } from 'antd';
 import React from 'react';
 import { version } from 'tailchat-shared';
 import logoUrl from '@assets/images/logo.svg';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 
 const { Paragraph, Text, Link } = Typography;
 

web/src/components/modals/SettingsView/Status.tsx

@@ -1,6 +1,6 @@
 import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { pluginInspectServices } from '@/plugin/common';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useMemo } from 'react';
 import { t, useAvailableServices } from 'tailchat-shared';
 

web/src/routes/Entry/GuestView.tsx

@@ -2,7 +2,7 @@ import { Spinner } from '@/components/Spinner';
 import { useSearchParam } from '@/hooks/useSearchParam';
 import { setUserJWT } from '@/utils/jwt-helper';
 import { setGlobalUserLoginInfo } from '@/utils/user-helper';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import {

web/src/routes/Entry/LoginView.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { Divider } from 'antd';
 import { isValidStr, loginWithEmail, t, useAsyncFn } from 'tailchat-shared';
 import React, { useState } from 'react';

web/src/routes/Entry/RegisterView.tsx

@@ -2,7 +2,7 @@ import { isValidStr, registerWithEmail, t, useAsyncFn } from 'tailchat-shared';
 import React, { useState } from 'react';
 import { Spinner } from '../../components/Spinner';
 import { string } from 'yup';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { useHistory } from 'react-router';
 import { setUserJWT } from '../../utils/jwt-helper';
 import { setGlobalUserLoginInfo } from '../../utils/user-helper';

web/src/routes/Main/Content/Group/SidebarItem.tsx

@@ -15,7 +15,7 @@ import { Dropdown, Menu } from 'antd';
 import copy from 'copy-to-clipboard';
 import { usePanelWindow } from '@/hooks/usePanelWindow';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 
 /**
  * 群组面板侧边栏组件

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import { SidebarItem } from '../SidebarItem';
 import { t, useDMConverseList, useUserInfo } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';

web/src/routes/Main/Navbar/GroupNav.tsx

@@ -1,7 +1,7 @@
 import { Avatar } from '@/components/Avatar';
 import { openModal } from '@/components/Modal';
 import { ModalCreateGroup } from '@/components/modals/CreateGroup';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useCallback, useMemo } from 'react';
 import { GroupInfo, t, useAppSelector, useGroupUnread } from 'tailchat-shared';
 import { NavbarNavItem } from './NavItem';

web/src/routes/Main/Navbar/MobileMenuBtn.tsx

@@ -1,5 +1,5 @@
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useCallback } from 'react';
 import { useSidebarContext } from '../SidebarContext';
 

web/src/routes/Main/Navbar/SettingBtn.tsx

@@ -1,6 +1,6 @@
 import { closeModal, openModal } from '@/components/Modal';
 import { SettingsView } from '@/components/modals/SettingsView';
-import { Icon } from '@iconify/react';
+import { Icon } from '@/components/Icon';
 import React, { useCallback } from 'react';
 
 export const SettingBtn: React.FC = React.memo(() => {