dep: replace react-loadable by lazy and suspense

fixes #1009

`react-loadable` is a 7 years old package that uses a legacy
contextTypes API, removed in React 19.

The same component behavior can be achieved by using React's `lazy` and
`Suspense` functionalities instead.

This affects the `InterviewsByAccessCode` component.

Author: tahini

packages/evolution-frontend/package.json

@@ -60,7 +60,6 @@
     "react-dom": "^19.0.0",
     "react-i18next": "^12.3.1",
     "react-input-range": "^1.3.0",
-    "react-loadable": "^5.5.0",
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",
     "react-redux": "^9.2.0",

packages/evolution-frontend/src/components/admin/interviews/InterviewsByAccessCode.tsx

@@ -4,25 +4,18 @@
  * This file is licensed under the MIT License.
  * License text available at https://opensource.org/licenses/MIT
  */
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
-import Loadable from 'react-loadable';
 import Loader from 'react-spinners/HashLoader';
 
 import { InterviewContext } from '../../../contexts/InterviewContext';
 import InputString from 'chaire-lib-frontend/lib/components/input/InputString';
 import { Link, useLocation, useParams } from 'react-router';
 import { _booleish } from 'chaire-lib-common/lib/utils/LodashExtensions';
 
-const loader = function Loading() {
-    return <Loader size={30} color={'#aaaaaa'} loading={true} />;
-};
+const LoaderComponent = () => <Loader size={30} color={'#aaaaaa'} loading={true} />;
 
-const InterviewsComponent = Loadable({
-    // TODO: move this to componentDidMount like in Monitoring.tsx
-    loader: () => import('./InterviewSearchList'),
-    loading: loader
-});
+const InterviewsComponent = lazy(() => import('./InterviewSearchList'));
 
 const InterviewsByAccessCode: React.FC = () => {
     const location = useLocation();
@@ -54,7 +47,9 @@ const InterviewsByAccessCode: React.FC = () => {
                     </button>
                 </Link>
             </div>
-            <InterviewsComponent autoCreateIfNoData={createNewIfNoData} queryData={urlSearch} />
+            <Suspense fallback={<LoaderComponent />}>
+                <InterviewsComponent autoCreateIfNoData={createNewIfNoData} queryData={urlSearch} />
+            </Suspense>
         </div>
     );
 };

yarn.lock

@@ -11136,7 +11136,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11366,13 +11366,6 @@ react-lifecycles-compat@^3.0.0:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-loadable@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"
-  integrity sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg==
-  dependencies:
-    prop-types "^15.5.0"
-
 react-markdown@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-9.0.1.tgz#c05ddbff67fd3b3f839f8c648e6fb35d022397d1"