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

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 };
};