Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/input/hooks/useIconPicker.ts

@@ -0,0 +1,13 @@
+import { useRecoilState } from 'recoil';
+
+import { iconPickerState } from '../states/iconPickerState';
+
+export const useIconPicker = () => {
+  const [iconPicker, setIconPicker] = useRecoilState(iconPickerState);
+
+  return {
+    Icon: iconPicker.Icon,
+    iconKey: iconPicker.iconKey,
+    setIconPicker,
+  };
+};

packages/twenty-front/src/modules/ui/input/hooks/useLazyLoadIcon.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+import { useLazyLoadIcons } from './useLazyLoadIcons';
+
+export const useLazyLoadIcon = (iconKey: string) => {
+  const { isLoadingIcons, icons } = useLazyLoadIcons();
+  const [Icon, setIcon] = useState<IconComponent | undefined>();
+  const [isLoadingIcon, setIsLoadingIcon] = useState(true);
+
+  useEffect(() => {
+    if (!iconKey) return;
+
+    if (!isLoadingIcons) {
+      setIcon(icons[iconKey]);
+      setIsLoadingIcon(false);
+    }
+  }, [iconKey, icons, isLoadingIcons]);
+
+  return { Icon, isLoadingIcon };
+};

packages/twenty-front/src/modules/ui/input/hooks/useLazyLoadIcons.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { iconsState } from '@/ui/input/states/iconsState';
+
+export const useLazyLoadIcons = () => {
+  const [icons, setIcons] = useRecoilState(iconsState);
+  const [isLoadingIcons, setIsLoadingIcons] = useState(true);
+
+  useEffect(() => {
+    import('../constants/icons').then((lazyLoadedIcons) => {
+      setIcons(lazyLoadedIcons);
+      setIsLoadingIcons(false);
+    });
+  }, [setIcons]);
+
+  return { icons, isLoadingIcons };
+};