feat: loadable component

package.json

@@ -59,6 +59,7 @@
     "@fortawesome/fontawesome": "^1.1.3",
     "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "@fortawesome/react-fontawesome": "^0.0.17",
+    "@loadable/component": "^5.16.4",
     "airbnb-prop-types": "^2.15.0",
     "classnames": "^2.2.5",
     "date-fns": "^2.30.0",

src/components/CompanyAndJobTitle/Overview/SummaryBlock.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
 
-import SalaryDistributionChart from 'common/Charts/SalaryDistributionChart';
-import JobTitleDistrubitionChart from 'common/Charts/JobTitleDistrubitionChart';
 import AverageWeekWorkTimeView from './AverageWeekWorkTimeView';
 import styles from './SummaryBlock.module.css';
 
+const SalaryDistributionChart = loadable(() =>
+  import('common/Charts/SalaryDistributionChart'),
+);
+const JobTitleDistributionChart = loadable(() =>
+  import('common/Charts/JobTitleDistributionChart'),
+);
+
 const SummaryBlock = ({
   salaryDistribution,
   jobAverageSalaries,
@@ -26,10 +32,10 @@ const SummaryBlock = ({
     {jobAverageSalaries && (
       <React.Fragment>
         <div className={styles.barChart}>
-          <JobTitleDistrubitionChart data={jobAverageSalaries} />
+          <JobTitleDistributionChart data={jobAverageSalaries} />
         </div>
         <div className={styles.barChartSm}>
-          <JobTitleDistrubitionChart data={jobAverageSalaries} />
+          <JobTitleDistributionChart data={jobAverageSalaries} />
         </div>
       </React.Fragment>
     )}

src/components/ExperienceDetail/ChartsZone/index.js

@@ -4,13 +4,19 @@ import cn from 'classnames';
 import { generatePath } from 'react-router';
 import R from 'ramda';
 import ChartWrapper from '../../LandingPage/ChartWrapper';
-import SalaryDistributionChart from 'common/Charts/SalaryDistributionChart';
-import JobTitleDistributionChart from 'common/Charts/JobTitleDistrubitionChart';
+import loadable from '@loadable/component';
 import styles from '../../LandingPage/SummarySection.module.css';
 import moduleStyles from './ChartsZone.module.css';
 
 const isEmptyOrNull = R.either(R.isEmpty, R.isNil);
 
+const SalaryDistributionChart = loadable(() =>
+  import('common/Charts/SalaryDistributionChart'),
+);
+const JobTitleDistributionChart = loadable(() =>
+  import('common/Charts/JobTitleDistributionChart'),
+);
+
 const ChartsZone = ({
   experience: {
     company: {

src/components/LandingPage/SummarySection.js

@@ -1,11 +1,16 @@
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { zip } from 'ramda';
+import loadable from '@loadable/component';
 import Carousel, { CarouselPage } from 'common/Carousel';
 import ChartWrapper from './ChartWrapper';
-import SalaryDistributionChart from 'common/Charts/SalaryDistributionChart';
-import JobTitleDistributionChart from 'common/Charts/JobTitleDistrubitionChart';
 import styles from './SummarySection.module.css';
+const SalaryDistributionChart = loadable(() =>
+  import('common/Charts/SalaryDistributionChart'),
+);
+const JobTitleDistributionChart = loadable(() =>
+  import('common/Charts/JobTitleDistributionChart'),
+);
 
 const SummarySection = ({
   popularCompanyAverageSalary,

yarn.lock

@@ -1254,6 +1254,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.18":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.6.tgz#5b76eb89ad45e2e4a0a8db54c456251469a3358e"
+  integrity sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.21.0":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
@@ -1607,6 +1614,15 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@loadable/component@^5.16.4":
+  version "5.16.4"
+  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.16.4.tgz#583cb65945a5061ca3c6b90eb34835c154283ff4"
+  integrity sha512-fJWxx9b5WHX90QKmizo9B+es2so8DnBthI1mbflwCoOyvzEwxiZ/SVDCTtXEnHG72/kGBdzr297SSIekYtzSOQ==
+  dependencies:
+    "@babel/runtime" "^7.12.18"
+    hoist-non-react-statics "^3.3.1"
+    react-is "^16.12.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz"
@@ -6304,6 +6320,13 @@ hoist-non-react-statics@^3.3.0:
   dependencies:
     react-is "^16.7.0"
 
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"