front: use <img loading="lazy"> instead of react-lazy-load-image-comp…

…onent There is a standard way to defer image loading until they become visible. Use that instead of a React plugin. More details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
OpenRailAssociation · Sep 13, 2024 · 66adf79 · 66adf79
1 parent afc441e
commit 66adf79
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 36 deletions.
diff --git a/front/package.json b/front/package.json
@@ -97,7 +97,6 @@
     "react-icons": "^5.0.1",
     "react-id-generator": "^3.0.2",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-lazy-load-image-component": "^1.6.0",
     "react-map-gl": "^7.1.7",
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",

diff --git a/front/src/modules/project/components/ProjectCard.tsx b/front/src/modules/project/components/ProjectCard.tsx
@@ -4,7 +4,6 @@ import { Calendar, CheckCircle, FileDirectory, FileDirectoryOpen } from '@osrd-p
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 import nextId from 'react-id-generator';
-import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -55,7 +54,7 @@ export default function ProjectCard({ setFilterChips, project, isSelected, toggl
         <CheckCircle variant="fill" size="lg" />
       </span>
       <div className="project-card-img">
-        <LazyLoadImage src={imageUrl} alt="project logo" />
+        <img src={imageUrl} alt="project logo" loading="lazy" />
         <div className="buttons">
           <Link to={`/operational-studies/projects/${project.id}`}>
             <button

diff --git a/front/src/modules/rollingStock/components/RollingStock2Img.tsx b/front/src/modules/rollingStock/components/RollingStock2Img.tsx
@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from 'react';
 
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-
 import placeholderRollingStockElectric from 'assets/pictures/placeholder_rollingstock_elec.gif';
 import placeholderRollingStockThermal from 'assets/pictures/placeholder_rollingstock_thermal.gif';
 import { getDocument } from 'common/api/documentApi';
@@ -48,7 +46,7 @@ const RollingStock2Img = ({ rollingStock }: RollingStock2ImgProps) => {
     getRollingStockImage();
   }, [rollingStock]);
 
-  return <LazyLoadImage src={imageUrl || ''} alt={rollingStock?.name || 'defaultImg'} />;
+  return <img src={imageUrl || ''} alt={rollingStock?.name || 'defaultImg'} loading="lazy" />;
 };
 
 export default React.memo(RollingStock2Img);
diff --git a/front/src/modules/rollingStock/components/RollingStockCard/RollingStockCard.tsx b/front/src/modules/rollingStock/components/RollingStockCard/RollingStockCard.tsx
@@ -6,7 +6,6 @@ import { BsLightningFill } from 'react-icons/bs';
 import { FaWeightHanging } from 'react-icons/fa';
 import { IoIosSpeedometer } from 'react-icons/io';
 import { MdLocalGasStation } from 'react-icons/md';
-import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 import type { Comfort, LightRollingStockWithLiveries } from 'common/api/osrdEditoastApi';
 import RollingStock2Img from 'modules/rollingStock/components/RollingStock2Img';
@@ -98,17 +97,15 @@ const RollingStockCard = ({
           setCurvesComfortList={setCurvesComfortList}
         />
       ) : (
-        <LazyLoadComponent>
-          <div
-            className={cx('rollingstock-body-container-img', {
-              'opened-rollingstock-card-body': isOpen,
-            })}
-          >
-            <div className="rollingstock-body-img">
-              <RollingStock2Img rollingStock={rollingStock} />
-            </div>
+        <div
+          className={cx('rollingstock-body-container-img', {
+            'opened-rollingstock-card-body': isOpen,
+          })}
+        >
+          <div className="rollingstock-body-img">
+            <RollingStock2Img rollingStock={rollingStock} />
           </div>
-        </LazyLoadComponent>
+        </div>
       )}
       <div className="rollingstock-footer">
         <div className="rollingstock-footer-specs">

diff --git a/...c/modules/trainschedule/components/ImportTrainSchedule/ImportTrainScheduleTrainDetail.tsx b/...c/modules/trainschedule/components/ImportTrainSchedule/ImportTrainScheduleTrainDetail.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 
 import cx from 'classnames';
 import nextId from 'react-id-generator';
-import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 import type { ImportedTrainSchedule } from 'applications/operationalStudies/types';
 import type {
@@ -65,11 +64,9 @@ export default function ImportTrainScheduleTrainDetail({
           {calcRouteDurationInHour(trainData.departureTime, trainData.arrivalTime)}
         </span>
         {rollingStock && (
-          <LazyLoadComponent>
-            <span className="import-train-schedule-traindetail-rollingstock">
-              <RollingStock2Img rollingStock={rollingStock} />
-            </span>
-          </LazyLoadComponent>
+          <span className="import-train-schedule-traindetail-rollingstock">
+            <RollingStock2Img rollingStock={rollingStock} />
+          </span>
         )}
         <span className="import-train-schedule-traindetail-rollingstock-name">
           {trainData.rollingStock}

diff --git a/front/yarn.lock b/front/yarn.lock
@@ -10385,11 +10385,6 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
-
 lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -12735,14 +12730,6 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lazy-load-image-component@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.0.tgz#f262c2f163052d71011e282031fd60aafa6494ac"
-  integrity sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==
-  dependencies:
-    lodash.debounce "^4.0.8"
-    lodash.throttle "^4.1.1"
-
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"