perf: split imports into smaller chunks (#528)

Author: swouf

src/modules/main/Activity.tsx

@@ -1,23 +1,58 @@
-import { FC } from 'react';
+import { FC, lazy, Suspense, SuspenseProps } from 'react';
 
 import { ActivityType } from '@/interfaces/interactionProcess';
 
 import { useLocalContext } from '@graasp/apps-query-client';
 import { useActivityContext } from '../context/ActivityContext';
-import ResponseCollection from '../responseCollection/ResponseCollection';
-import ResponseEvaluation from '../responseEvaluation/ResponseEvaluation';
 import OrchestrationBar from '../orchestration/OrchestrationBar';
 import { useSettings } from '../context/SettingsContext';
-import ResultsView from '../results/ResultsView';
+import Loader from '../common/Loader';
+
+const ActivitySuspense: FC<SuspenseProps> = (props) => (
+  <Suspense fallback={<Loader />} {...props}>
+    {props.children}
+  </Suspense>
+);
+
+const getResponseEvaluation = (): JSX.Element => {
+  const ResponseEvaluation = lazy(
+    () => import('../responseEvaluation/ResponseEvaluation.js'),
+  );
+  return (
+    <ActivitySuspense>
+      <ResponseEvaluation />
+    </ActivitySuspense>
+  );
+};
+
+const getResultsView = (): JSX.Element => {
+  const ResultsView = lazy(() => import('../results/ResultsView.js'));
+  return (
+    <ActivitySuspense>
+      <ResultsView />
+    </ActivitySuspense>
+  );
+};
+
+const getResponseCollection = (): JSX.Element => {
+  const ResponseCollection = lazy(
+    () => import('../responseCollection/ResponseCollection.js'),
+  );
+  return (
+    <ActivitySuspense>
+      <ResponseCollection />
+    </ActivitySuspense>
+  );
+};
 
 const getActivityComponent = (activity: ActivityType): JSX.Element => {
   switch (activity) {
     case ActivityType.Evaluation:
-      return <ResponseEvaluation />;
+      return getResponseEvaluation();
     case ActivityType.Results:
-      return <ResultsView />;
+      return getResultsView();
     default:
-      return <ResponseCollection />;
+      return getResponseCollection();
   }
 };
 

src/modules/main/BuilderView.tsx

@@ -1,4 +1,4 @@
-import { SyntheticEvent, useMemo, useState } from 'react';
+import { lazy, Suspense, SyntheticEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Paper, Stack } from '@mui/material';
@@ -16,8 +16,8 @@ import {
 } from '@/config/selectors';
 
 import TabPanel from '../common/TabPanel';
-import SettingsView from '../settings/Settings';
 import Activity from './Activity';
+import Loader from '../common/Loader';
 
 interface TabType {
   tabLabel: string;
@@ -26,6 +26,7 @@ interface TabType {
 }
 
 const BuilderView = (): JSX.Element => {
+  const SettingsView = lazy(() => import('../settings/Settings.js'));
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const { t } = useTranslation();
   const handleChange = (event: SyntheticEvent, value: number): void => {
@@ -50,10 +51,14 @@ const BuilderView = (): JSX.Element => {
   const settingsTab = useMemo(
     () => ({
       tabLabel: t('SETTINGS_TAB'),
-      tabChild: <SettingsView />,
+      tabChild: (
+        <Suspense fallback={<Loader />}>
+          <SettingsView />
+        </Suspense>
+      ),
       tabSelector: SETTINGS_TAB_CY,
     }),
-    [t],
+    [SettingsView, t],
   );
 
   // const ideasViewTab = useMemo(