Fix Icon Lazy Loading (#2984)

Fix Icon picker

packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx

@@ -10,7 +10,7 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { RecordTableActionBar } from '@/object-record/record-table/action-bar/components/RecordTableActionBar';
 import { RecordTableContextMenu } from '@/object-record/record-table/context-menu/components/RecordTableContextMenu';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { PageAddButton } from '@/ui/layout/page/PageAddButton';
 import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
@@ -36,11 +36,14 @@ export const RecordTablePage = () => {
 
   const navigate = useNavigate();
 
-  const { icons } = useLazyLoadIcons();
-
   const { findObjectMetadataItemByNamePlural } =
     useObjectMetadataItemForSettings();
 
+  const { getIcon } = useIcons();
+  const Icon = getIcon(
+    findObjectMetadataItemByNamePlural(objectNamePlural)?.icon,
+  );
+
   useEffect(() => {
     if (
       !isNonEmptyString(objectNamePlural) &&
@@ -64,12 +67,7 @@ export const RecordTablePage = () => {
         title={
           objectNamePlural.charAt(0).toUpperCase() + objectNamePlural.slice(1)
         }
-        Icon={
-          icons[
-            findObjectMetadataItemByNamePlural(objectNamePlural)!.icon ??
-              'Icon123'
-          ]
-        }
+        Icon={Icon}
       >
         <PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
         <PageAddButton onClick={handleAddButtonClick} />

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -1,6 +1,6 @@
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -15,7 +15,7 @@ export const ObjectFilterDropdownFilterSelect = () => {
     availableFilterDefinitions,
   } = useFilterDropdown();
 
-  const { icons } = useLazyLoadIcons();
+  const { getIcon } = useIcons();
 
   const setHotkeyScope = useSetHotkeyScope();
 
@@ -40,7 +40,7 @@ export const ObjectFilterDropdownFilterSelect = () => {
 
               setObjectFilterDropdownSearchInput('');
             }}
-            LeftIcon={icons[availableFilterDefinition.iconName]}
+            LeftIcon={getIcon(availableFilterDefinition.iconName)}
             text={availableFilterDefinition.label}
           />
         ))}

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -3,8 +3,8 @@ import { useCallback, useState } from 'react';
 import { useSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useSortDropdown';
 import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
 import { IconChevronDown } from '@/ui/display/icon';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { LightButton } from '@/ui/input/button/components/LightButton';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -68,7 +68,7 @@ export const ObjectSortDropdownButton = ({
     resetState();
   };
 
-  const { icons } = useLazyLoadIcons();
+  const { getIcon } = useIcons();
 
   return (
     <ObjectSortDropdownScope sortScopeId={sortDropdownId}>
@@ -117,7 +117,7 @@ export const ObjectSortDropdownButton = ({
                           testId={`select-sort-${index}`}
                           key={index}
                           onClick={() => handleAddSort(availableSortDefinition)}
-                          LeftIcon={icons[availableSortDefinition.iconName]}
+                          LeftIcon={getIcon(availableSortDefinition.iconName)}
                           text={availableSortDefinition.label}
                         />
                       ))}

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 
 import { FieldDisplay } from '../../field/components/FieldDisplay';
 import { FieldInput } from '../../field/components/FieldInput';
@@ -59,7 +59,7 @@ export const RecordInlineCell = () => {
     closeInlineCell();
   };
 
-  const { icons } = useLazyLoadIcons();
+  const { getIcon } = useIcons();
 
   return (
     <RecordInlineCellContainer
@@ -71,7 +71,7 @@ export const RecordInlineCell = () => {
             }
           : undefined
       }
-      IconLabel={icons[fieldDefinition.iconName]}
+      IconLabel={getIcon(fieldDefinition.iconName)}
       editModeContent={
         <FieldInput
           onEnter={handleEnter}

packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx

@@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
@@ -39,14 +39,14 @@ const StyledText = styled.span`
 export const ColumnHead = ({ column }: ColumnHeadProps) => {
   const theme = useTheme();
 
-  const { icons, isLoadingIcons } = useLazyLoadIcons();
-  const Icon = icons[column.iconName];
+  const { getIcon } = useIcons();
+  const Icon = getIcon(column.iconName);
 
   return (
     <>
       <StyledTitle>
         <StyledIcon>
-          {!isLoadingIcons && <Icon size={theme.icon.size.md} />}
+          <Icon size={theme.icon.size.md} />
         </StyledIcon>
         <StyledText>{column.label}</StyledText>
       </StyledTitle>

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { IconSettings } from '@/ui/display/icon';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -22,8 +22,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
 
   const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
 
-  const { icons } = useLazyLoadIcons();
-
+  const { getIcon } = useIcons();
   const { handleColumnVisibilityChange } = useTableColumns();
 
   const handleAddColumn = useCallback(
@@ -46,7 +45,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
           <MenuItem
             key={column.fieldMetadataId}
             onClick={() => handleAddColumn(column)}
-            LeftIcon={icons[column.iconName]}
+            LeftIcon={getIcon(column.iconName)}
             text={column.label}
           />
         ))}