Fix Icon Lazy Loading (#2984)

Fix Icon picker

packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { iconsState } from '@/ui/display/icon/states/iconsState';
+
+type IconsProviderProps = {
+  children: JSX.Element;
+};
+
+export const IconsProvider = ({ children }: IconsProviderProps) => {
+  const setIcons = useSetRecoilState(iconsState);
+
+  useEffect(() => {
+    import('../constants/index').then((lazyLoadedIcons) => {
+      setIcons(lazyLoadedIcons.default);
+    });
+  }, [setIcons]);
+
+  return children;
+};

packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts

@@ -0,0 +1,20 @@
+import { useRecoilValue } from 'recoil';
+
+import { Icon123 } from '@/ui/display/icon';
+import { iconsState } from '@/ui/display/icon/states/iconsState';
+
+export const useIcons = () => {
+  const icons = useRecoilValue(iconsState);
+  const defaultIcon = Icon123;
+
+  const getIcons = () => {
+    return icons;
+  };
+
+  const getIcon = (iconKey?: string | null) => {
+    if (!iconKey) return defaultIcon;
+    return icons[iconKey] ?? defaultIcon;
+  };
+
+  return { getIcons, getIcon };
+};

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -1,8 +1,10 @@
 /* eslint-disable no-restricted-imports */
 export type { TablerIconsProps } from '@tabler/icons-react';
 export {
+  Icon123,
   IconAlertCircle,
   IconAlertTriangle,
+  IconApps,
   IconArchive,
   IconArchiveOff,
   IconArrowDown,
@@ -36,19 +38,25 @@ export {
   IconCopy,
   IconCurrencyDollar,
   IconDatabase,
+  IconDeviceFloppy,
   IconDotsVertical,
   IconDownload,
   IconEye,
   IconEyeOff,
+  IconFile,
   IconFileCheck,
   IconFileImport,
+  IconFileText,
   IconFileUpload,
+  IconFileZip,
   IconForbid,
   IconGripVertical,
+  IconHeadphones,
   IconHeart,
   IconHeartOff,
   IconHelpCircle,
   IconHierarchy2,
+  IconInfoCircle,
   IconKey,
   IconLanguage,
   IconLayoutKanban,
@@ -70,8 +78,10 @@ export {
   IconPaperclip,
   IconPencil,
   IconPhone,
+  IconPhoto,
   IconPlug,
   IconPlus,
+  IconPresentation,
   IconProgressCheck,
   IconRelationManyToMany,
   IconRelationOneToMany,
@@ -80,6 +90,7 @@ export {
   IconRobot,
   IconSearch,
   IconSettings,
+  IconTable,
   IconTag,
   IconTarget,
   IconTargetArrow,
@@ -90,5 +101,7 @@ export {
   IconUser,
   IconUserCircle,
   IconUsers,
+  IconVideo,
+  IconWorld,
   IconX,
 } from '@tabler/icons-react';

packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+export const iconsState = atom<Record<string, IconComponent>>({
+  key: 'iconsState',
+  default: {},
+});