admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix Icon Lazy Loading (#2984)

Browse Source 
Fix Icon picker
This commit is contained in:
Charles Bochet
2023-12-14 12:13:02 +01:00
committed by GitHub
parent ed2cd408bf
commit 8916dee352
33 changed files with 4366 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -1,6 +1,8 @@
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { IconApps } from '@/ui/display/icon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@ -16,9 +18,6 @@ import { arrayToChunks } from '~/utils/array/array-to-chunks';
import { IconButton, IconButtonVariant } from '../button/components/IconButton';
import { LightIconButton } from '../button/components/LightIconButton';
import { IconApps } from '../constants/icons';
import { useLazyLoadIcons } from '../hooks/useLazyLoadIcons';
import { DropdownMenuSkeletonItem } from '../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
type IconPickerProps = {
@ -95,7 +94,8 @@ export const IconPicker = ({
const { closeDropdown } = useDropdown({ dropdownScopeId });
const { icons, isLoadingIcons: isLoading } = useLazyLoadIcons();
const { getIcons, getIcon } = useIcons();
const { icons } = getIcons();
const iconKeys = useMemo(() => {
const filteredIconKeys = Object.keys(icons).filter((iconKey) => {
@ -128,7 +128,7 @@ export const IconPicker = ({
clickableComponent={
<IconButton
disabled={disabled}
Icon={selectedIconKey ? icons[selectedIconKey] : IconApps}
Icon={selectedIconKey ? getIcon(selectedIconKey) : IconApps}
variant={variant}
/>
}
@ -139,7 +139,7 @@ export const IconPicker = ({
selectableItemIds={iconKeys2d}
hotkeyScope={IconPickerHotkeyScope.IconPicker}
onEnter={(iconKey) => {
onChange({ iconKey, Icon: icons[iconKey] });
onChange({ iconKey, Icon: getIcon(iconKey) });
closeDropdown();
}}
>
@ -159,24 +159,20 @@ export const IconPicker = ({
onMouseLeave={goBackToPreviousHotkeyScope}
>
<DropdownMenuItemsContainer>
{isLoading ? (
<DropdownMenuSkeletonItem />
) : (
<StyledMenuIconItemsContainer>
{iconKeys.map((iconKey) => (
<IconPickerIcon
key={iconKey}
iconKey={iconKey}
onClick={() => {
onChange({ iconKey, Icon: icons[iconKey] });
closeDropdown();
}}
selectedIconKey={selectedIconKey}
Icon={icons[iconKey]}
/>
))}
</StyledMenuIconItemsContainer>
)}
<StyledMenuIconItemsContainer>
{iconKeys.map((iconKey) => (
<IconPickerIcon
key={iconKey}
iconKey={iconKey}
onClick={() => {
onChange({ iconKey, Icon: getIcon(iconKey) });
closeDropdown();
}}
selectedIconKey={selectedIconKey}
Icon={getIcon(iconKey)}
/>
))}
</StyledMenuIconItemsContainer>
</DropdownMenuItemsContainer>
</div>
</DropdownMenu>

3
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
View File

@ -6,8 +6,7 @@ import { hasFlag } from 'country-flag-icons';
import * as Flags from 'country-flag-icons/react/3x2';
import { CountryCallingCode } from 'libphonenumber-js';
import { IconChevronDown } from '@/ui/display/icon';
import { IconWorld } from '@/ui/input/constants/icons';
import { IconChevronDown, IconWorld } from '@/ui/display/icon';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';

4199
packages/twenty-front/src/modules/ui/input/constants/icons.ts
View File

File diff suppressed because it is too large Load Diff

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

@ -1,22 +0,0 @@
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 };
};

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

@ -1,18 +0,0 @@
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 };
};

3
packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts
View File

@ -1,9 +1,8 @@
import { atom } from 'recoil';
import { IconApps } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { IconApps } from '../constants/icons';
type IconPickerState = {
Icon: IconComponent;
iconKey: string;

8
packages/twenty-front/src/modules/ui/input/states/iconsState.ts
View File

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