feat: get object metadata from backend in Object Detail and New Field… (#2122)

* feat: get object metadata from backend in Object Detail and New Field - Step 1

Closes #2008

* refactor: add useLazyLoadIcon hook

front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@@ -13,6 +13,7 @@ import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { IconButton } 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';
 
@@ -48,17 +49,10 @@ export const IconPicker = ({
   onOpen,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [icons, setIcons] = useState<Record<string, IconComponent>>({});
 
   const { closeDropdown } = useDropdown({ dropdownScopeId: 'icon-picker' });
 
-  useEffect(() => {
-    import('../constants/icons').then((lazyLoadedIcons) => {
-      setIcons(lazyLoadedIcons);
-      setIsLoading(false);
-    });
-  }, []);
+  const { icons, isLoadingIcons: isLoading } = useLazyLoadIcons();
 
   const iconKeys = useMemo(() => {
     const filteredIconKeys = Object.keys(icons).filter(

front/src/modules/ui/input/hooks/useLazyLoadIcon.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+export const useLazyLoadIcon = (iconKey: string) => {
+  const [Icon, setIcon] = useState<IconComponent | undefined>();
+  const [isLoadingIcon, setIsLoadingIcon] = useState(true);
+
+  useEffect(() => {
+    if (!iconKey) return;
+
+    import(`@tabler/icons-react/dist/esm/icons/${iconKey}.js`).then(
+      (lazyLoadedIcon) => {
+        setIcon(lazyLoadedIcon.default);
+        setIsLoadingIcon(false);
+      },
+    );
+  }, [iconKey]);
+
+  return { Icon, isLoadingIcon };
+};

front/src/modules/ui/input/hooks/useLazyLoadIcons.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+export const useLazyLoadIcons = () => {
+  const [icons, setIcons] = useState<Record<string, IconComponent>>({});
+  const [isLoadingIcons, setIsLoadingIcons] = useState(true);
+
+  useEffect(() => {
+    import('../constants/icons').then((lazyLoadedIcons) => {
+      setIcons(lazyLoadedIcons);
+      setIsLoadingIcons(false);
+    });
+  }, []);
+
+  return { icons, isLoadingIcons };
+};