feat: lazy load IconPicker icons (#1753)

Closes #1750

front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { LightIconButton } from '@/ui/button/components/LightIconButton';
@@ -8,9 +8,10 @@ import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/Style
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 
+import { DropdownMenuSkeletonItem } from '../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
+
 type IconPickerProps = {
-  icons: Record<string, IconComponent>;
+  onChange: (params: { iconKey: string; Icon: IconComponent }) => void;
-  onChange: (iconName: string) => void;
   selectedIconKey?: string;
 };
 
@@ -29,24 +30,29 @@ const StyledLightIconButton = styled(LightIconButton)<{ isSelected?: boolean }>`
     isSelected ? theme.background.transparent.light : 'transparent'};
 `;
 
-const convertIconKeyToLabel = (iconName: string) =>
+const convertIconKeyToLabel = (iconKey: string) =>
-  iconName.replace(/[A-Z]/g, (letter) => ` ${letter}`).trim();
+  iconKey.replace(/[A-Z]/g, (letter) => ` ${letter}`).trim();
 
-export const IconPicker = ({
+export const IconPicker = ({ onChange, selectedIconKey }: IconPickerProps) => {
-  icons,
-  onChange,
-  selectedIconKey,
-}: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [icons, setIcons] = useState<Record<string, IconComponent>>({});
+
+  useEffect(() => {
+    import('../constants/icons').then((lazyLoadedIcons) => {
+      setIcons(lazyLoadedIcons);
+      setIsLoading(false);
+    });
+  }, []);
 
   const iconKeys = useMemo(() => {
     const filteredIconKeys = Object.keys(icons).filter(
       (iconKey) =>
         iconKey !== selectedIconKey &&
         (!searchString ||
-          convertIconKeyToLabel(iconKey)
+          [iconKey, convertIconKeyToLabel(iconKey)].some((label) =>
-            .toLowerCase()
+            label.toLowerCase().includes(searchString.toLowerCase()),
-            .includes(searchString.toLowerCase())),
+          )),
     );
 
     return (
@@ -65,15 +71,19 @@ export const IconPicker = ({
       />
       <StyledDropdownMenuSeparator />
       <StyledMenuIconItemsContainer>
-        {iconKeys.map((iconKey) => (
+        {isLoading ? (
-          <StyledLightIconButton
+          <DropdownMenuSkeletonItem />
-            aria-label={convertIconKeyToLabel(iconKey)}
+        ) : (
-            isSelected={selectedIconKey === iconKey}
+          iconKeys.map((iconKey) => (
-            size="medium"
+            <StyledLightIconButton
-            Icon={icons[iconKey]}
+              aria-label={convertIconKeyToLabel(iconKey)}
-            onClick={() => onChange(iconKey)}
+              isSelected={selectedIconKey === iconKey}
-          />
+              size="medium"
-        ))}
+              Icon={icons[iconKey]}
+              onClick={() => onChange({ iconKey, Icon: icons[iconKey] })}
+            />
+          ))
+        )}
       </StyledMenuIconItemsContainer>
     </StyledIconPickerDropdownMenu>
   );

front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx

@@ -2,8 +2,8 @@ import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import * as icons from '@/ui/icon';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { sleep } from '~/testing/sleep';
 
 import { IconPicker } from '../IconPicker';
 
@@ -11,14 +11,6 @@ const meta: Meta<typeof IconPicker> = {
   title: 'UI/Input/IconPicker',
   component: IconPicker,
   decorators: [ComponentDecorator],
-  args: { icons },
-  argTypes: {
-    icons: { control: false },
-    selectedIconKey: {
-      options: Object.keys(icons),
-      control: { type: 'select' },
-    },
-  },
 };
 
 export default meta;
@@ -38,6 +30,8 @@ export const WithSearch: Story = {
 
     await userEvent.type(searchInput, 'Building skyscraper');
 
+    await sleep(1000);
+
     const searchedIcon = canvas.getByRole('button', {
       name: 'Icon Building Skyscraper',
     });