Improve lazy loading (#12393)

Creating manual chunk was a bad idea, we should always solve lazy
loading problem at the source instance.

Setting a 4.5MB for the index bundle size, CI will fail if we go above.

There is still a lot of room for optimizations!
- More agressive lazy loading (e.g. xyflow and tiptap are still loaded
in index!)
- Add a  prefetch mechanism
- Add stronger CI checks to make sure libraries we've set asides are not
added back
- Fix AllIcons component with does not work as intended (loaded on
initial load)

packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx

@@ -1,12 +1,33 @@
+import { useTheme } from '@emotion/react';
 import React from 'react';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
-import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
-
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { SPREADSHEET_IMPORT_MODAL_ID } from '@/spreadsheet-import/constants/SpreadsheetImportModalId';
+import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
 import { matchColumnsState } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
-import { SpreadsheetImport } from './SpreadsheetImport';
+
+const SpreadsheetImport = React.lazy(() =>
+  import('./SpreadsheetImport').then((module) => ({
+    default: module.SpreadsheetImport,
+  })),
+);
+
+const LoadingSkeleton = () => {
+  const theme = useTheme();
+
+  return (
+    <SkeletonTheme
+      baseColor={theme.background.tertiary}
+      highlightColor={theme.background.transparent.lighter}
+      borderRadius={theme.border.radius.sm}
+    >
+      <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
+    </SkeletonTheme>
+  );
+};
 
 type SpreadsheetImportProviderProps = React.PropsWithChildren;
 
@@ -36,11 +57,13 @@ export const SpreadsheetImportProvider = (
     <>
       {props.children}
       {spreadsheetImportDialog.isOpen && spreadsheetImportDialog.options && (
-        <SpreadsheetImport
-          onClose={handleClose}
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...spreadsheetImportDialog.options}
-        />
+        <React.Suspense fallback={<LoadingSkeleton />}>
+          <SpreadsheetImport
+            onClose={handleClose}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...spreadsheetImportDialog.options}
+          />
+        </React.Suspense>
       )}
     </>
   );