laanc lazy suspense 작업

config-overrides.js

@@ -1,11 +1,19 @@
-const SassRuleRewire = require('react-app-rewire-sass-rule')
-const path = require('path')
-const rewireAliases = require('react-app-rewire-aliases')
+const SassRuleRewire = require('react-app-rewire-sass-rule');
+const path = require('path');
+const rewireAliases = require('react-app-rewire-aliases');
 
 module.exports = function override(config, env) {
   require('react-app-rewire-postcss')(config, {
     plugins: loader => [require('postcss-rtl')()]
-  })
+  });
+
+  // Tree Shaking 활성화
+  config.optimization.usedExports = true;
+
+  // 코드 스플리팅 설정
+  config.optimization.splitChunks = {
+    chunks: 'all'
+  };
 
   config = rewireAliases.aliasesOptions({
     '@src': path.resolve(__dirname, 'src'),
@@ -17,7 +25,7 @@ module.exports = function override(config, env) {
     '@configs': path.resolve(__dirname, 'src/configs'),
     '@utils': path.resolve(__dirname, 'src/utility/Utils'),
     '@hooks': path.resolve(__dirname, 'src/utility/hooks')
-  })(config, env)
+  })(config, env);
 
   config = new SassRuleRewire()
     .withRuleOptions({
@@ -33,6 +41,6 @@ module.exports = function override(config, env) {
         }
       ]
     })
-    .rewire(config, env)
-  return config
-}
+    .rewire(config, env);
+  return config;
+};

src/components/account/login/AccountLogin.js

@@ -10,7 +10,7 @@ import {
 import { Mail, Lock } from 'react-feather';
 import { Link } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { ErrorModal } from '../../modal/ErrorModal';
+import ErrorModal from '../../modal/ErrorModal';
 import { useDispatch, useSelector } from 'react-redux';
 import * as Actions from '../../../modules/account/login/actions/authAction';
 import '../../../assets/css/custom.css';

src/components/account/mypage/AccountMypagePwForm.js

@@ -19,7 +19,7 @@ import {
   pwCheckAction
 } from '../../../modules/account/login/actions/authAction';
 import { useHistory } from 'react-router-dom';
-import { ErrorModal } from '../../modal/ErrorModal';
+import ErrorModal from '../../modal/ErrorModal';
 
 const AccountMypagePwForm = ({ activeTab }) => {
   // 비밀번호 확인 결과

src/components/laanc/LaancModal.js

@@ -1,6 +1,6 @@
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
-export const LaancModal = props => {
+export default function LaancModal(props) {
   const handleButtonClick = () => {
     window.open(props.modal.url);
   };
@@ -37,4 +37,4 @@ export const LaancModal = props => {
       </Modal>
     </div>
   );
-};
+}

src/components/laanc/LaancQr.js

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
-import { ErrorModal } from '../../components/modal/ErrorModal';
+import ErrorModal from '../../components/modal/ErrorModal';
 import axios from '../../modules/utils/customAxiosUtil';
 
 // 이제 handleUserEvent는 300ms 동안 추가 호출이 없을 때만 실행됩니다.

src/components/laanc/map/FlightArea.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 // mapbox
@@ -38,12 +38,17 @@ import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import gimpo from '../../map/geojson/gimpoAirportAirArea.json';
 
 import threebox from 'threebox-plugin';
-import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone';
-import { WeatherContainer } from '../../../containers/basis/flight/plan/WeatherContainer';
 import { initFlightBas } from '../../../modules/laanc/models/laancModels';
-import LaancAreaMap from './LaancAreaMap';
-import LaancDrawModal from './LaancDrawModal';
 
+const LaancAreaMap = lazy(() => import('./LaancAreaMap'));
+
+const WeatherContainer = lazy(() =>
+  import('../../../containers/basis/flight/plan/WeatherContainer')
+);
+const FeatureAirZone = lazy(() =>
+  import('../../map/mapbox/feature/FeatureAirZone')
+);
+const LaancDrawModal = lazy(() => import('./LaancDrawModal'));
 export default function FlightArea({
   centeredModal,
   setCenteredModal,
@@ -522,7 +527,9 @@ export default function FlightArea({
           style={{ width: '100%', height: '35vh' }}
         ></div>
         {isMapLoad && mapObject ? (
-          <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+          <Suspense fallback=''>
+            <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+          </Suspense>
         ) : null}
       </div>
       {page === 1 ? (
@@ -543,17 +550,19 @@ export default function FlightArea({
             비행 구역 설정
           </ModalHeader>
           <ModalBody>
-            <LaancAreaMap
-              mapContainer={mapContainer}
-              drawObj={drawObj}
-              handlerInitCoordinates={handlerInitCoordinates}
-              handlerSaveCheck={handlerSaveCheck}
-              handlerAddChange={handlerAddChange}
-              addData={addData}
-              setSaveData={setSaveData}
-              handlerSaveElev={handlerSaveElev}
-              setModal={setModal}
-            />
+            <Suspense fallback=''>
+              <LaancAreaMap
+                mapContainer={mapContainer}
+                drawObj={drawObj}
+                handlerInitCoordinates={handlerInitCoordinates}
+                handlerSaveCheck={handlerSaveCheck}
+                handlerAddChange={handlerAddChange}
+                addData={addData}
+                setSaveData={setSaveData}
+                handlerSaveElev={handlerSaveElev}
+                setModal={setModal}
+              />
+            </Suspense>
           </ModalBody>
           <ModalFooter>
             <div className='laanc-map-btn'>
@@ -630,7 +639,11 @@ export default function FlightArea({
           </ModalFooter>
         </Modal>
       ) : null}
-      {modal ? <LaancDrawModal modal={modal} handler={handlerModal} /> : null}
+      {modal ? (
+        <Suspense fallback=''>
+          <LaancDrawModal modal={modal} handler={handlerModal} />
+        </Suspense>
+      ) : null}
       <Modal
         isOpen={formModal}
         toggle={handlerWeather}
@@ -638,7 +651,10 @@ export default function FlightArea({
       >
         <ModalHeader toggle={handlerWeather}>날씨 정보</ModalHeader>
         <ModalBody>
-          <WeatherContainer mapAreaCoordList={wheather} />
+          <Suspense fallback=''>
+            {' '}
+            <WeatherContainer mapAreaCoordList={wheather} />
+          </Suspense>
         </ModalBody>
         <ModalFooter>
           <Button color='primary' onClick={handlerWeather}>

src/components/laanc/map/LaancAreaMap.js

@@ -1,9 +1,9 @@
+import { useEffect, useRef, useState, lazy, Suspense } from 'react';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
 import threebox from 'threebox-plugin';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
-import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Card, CardBody } from 'reactstrap';
 import { initFlightBas } from '../../../modules/basis/flight/models/basisFlightModel';
@@ -20,10 +20,12 @@ import {
   handlerCreateAirSpace
 } from '../../../utility/MapUtils';
 import gimpo from '../../map/geojson/gimpoAirportAirArea.json';
-import { FeatureAirZone } from '../../map/mapbox/feature/FeatureAirZone';
-import LaancMapSearch from './LaancMapSearch';
-import { LaancDrawControl } from './LaancDrawControl';
 
+const LaancMapSearch = lazy(() => import('./LaancMapSearch'));
+const FeatureAirZone = lazy(() =>
+  import('../../map/mapbox/feature/FeatureAirZone')
+);
+const LaancDrawControl = lazy(() => import('./LaancDrawControl'));
 export default function LaancAreaMap({
   mapContainer,
   drawObj,
@@ -294,7 +296,9 @@ export default function LaancAreaMap({
     <Card className='mb-0'>
       <CardBody>
         <div style={{ position: 'relative' }}>
-          <LaancMapSearch mapObject={mapObject} />
+          <Suspense fallback=''>
+            <LaancMapSearch mapObject={mapObject} />
+          </Suspense>
           <div
             className='d-flex coords-wrap'
             style={{
@@ -389,23 +393,25 @@ export default function LaancAreaMap({
           ></div>
           {isMapLoad && mapObject ? (
             <>
-              <LaancDrawControl
-                addData={addData}
-                drawObj={drawObj}
-                setModal={setModal}
-                mapObject={mapObject}
-                areaCoordList={mapAreaCoordList}
-                setSaveData={setSaveData}
-                setViewCoordObj={setViewCoordObj}
-                handlerConfirm={handlerConfirm}
-                handlerSaveElev={handlerSaveElev}
-                handlerAddChange={handlerAddChange}
-                handlerSaveCheck={handlerSaveCheck}
-                handlerCoordinates={handlerCoordinates}
-                handlerInitCoordinates={handlerInitCoordinates}
-                handlerAreaInfoToAreaList={handlerAreaInfoToAreaList}
-              />
-              <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+              <Suspense fallback=''>
+                <LaancDrawControl
+                  addData={addData}
+                  drawObj={drawObj}
+                  setModal={setModal}
+                  mapObject={mapObject}
+                  areaCoordList={mapAreaCoordList}
+                  setSaveData={setSaveData}
+                  setViewCoordObj={setViewCoordObj}
+                  handlerConfirm={handlerConfirm}
+                  handlerSaveElev={handlerSaveElev}
+                  handlerAddChange={handlerAddChange}
+                  handlerSaveCheck={handlerSaveCheck}
+                  handlerCoordinates={handlerCoordinates}
+                  handlerInitCoordinates={handlerInitCoordinates}
+                  handlerAreaInfoToAreaList={handlerAreaInfoToAreaList}
+                />
+                <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
+              </Suspense>
             </>
           ) : null}
         </div>

src/components/laanc/map/LaancDrawControl.js

@@ -1,5 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
-import { ErrorModal } from '../../modal/ErrorModal';
+import { useEffect, useRef, useState, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   CalculateDistance,
@@ -22,7 +21,8 @@ import createSupplementaryPointsForCircle from 'mapbox-gl-draw-circle/lib/utils/
 import createSupplementaryPoints from 'mapbox-gl-draw-circle/node_modules/@mapbox/mapbox-gl-draw/src/lib/create_supplementary_points';
 import Constants from 'mapbox-gl-draw-circle/node_modules/@mapbox/mapbox-gl-draw/src/constants';
 
-export const LaancDrawControl = props => {
+const ErrorModal = lazy(() => import('../../modal/ErrorModal'));
+export default function LaancDrawControl(props) {
   const dispatch = useDispatch();
   const drawObj = props.drawObj;
 
@@ -860,7 +860,9 @@ export const LaancDrawControl = props => {
 
   return (
     <>
-      <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
+      <Suspense fallback=''>
+        <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
+      </Suspense>
     </>
   );
-};
+}

src/components/laanc/step/LaacnStep3.js

@@ -14,11 +14,12 @@ import {
   Input,
   Badge
 } from 'reactstrap';
-import FlightArea from '../map/FlightArea';
 import { CheckCircle } from 'react-feather';
 import { HOST } from '../../../configs/constants';
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
+import FlightArea from '../map/FlightArea';
+
 export default function LaacnStep3({
   disabledAnimation,
   data,

src/components/laanc/step/LaancStep1.js

@@ -1,16 +1,11 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, lazy, Suspense } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Flatpickr from 'react-flatpickr';
 import '@styles/react/libs/flatpickr/flatpickr.scss';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import { AlertCircle, Info } from 'react-feather';
-import FlightArea from '../map/FlightArea';
-import { ErrorModal } from '../../modal/ErrorModal';
-import { InfoModal } from '../../modal/InfoModal';
-import { LaancModal } from '../LaancModal';
 import { FLIGHT_PLAN_AREA_BUFFER_LIST } from '../../../modules/basis/flight/actions/basisFlightAction';
-import LaancQr from '../../../components/laanc/LaancQr';
 import axios from '../../../modules/utils/customAxiosUtil';
 import dayjs from 'dayjs';
 import {
@@ -28,6 +23,11 @@ import {
   Modal
 } from 'reactstrap';
 
+const LaancModal = lazy(() => import('../LaancModal'));
+const LaancQr = lazy(() => import('../../../components/laanc/LaancQr'));
+const FlightArea = lazy(() => import('../map/FlightArea'));
+const ErrorModal = lazy(() => import('../../modal/ErrorModal'));
+const InfoModal = lazy(() => import('../../modal/InfoModal'));
 export default function LaancStep1({
   detailData,
   setDetailData,
@@ -665,7 +665,6 @@ export default function LaancStep1({
           // setIsPopUp(true);  잠시 주석
           return;
         } catch (error) {
-          console.log('>>', error);
           setIsErrorModal({
             isOpen: true,
             title: '오류',
@@ -837,7 +836,6 @@ export default function LaancStep1({
                               );
                             }
                           );
-                          console.log('>>', laancSun);
 
                           const schFltStDt = dayjs(value).format('HHmmss');
 
@@ -1285,13 +1283,15 @@ export default function LaancStep1({
             </Button>
           </div>
           <div className='laanc-map-sm'>
-            <FlightArea
-              centeredModal={centeredModal}
-              setCenteredModal={setCenteredModal}
-              handleChange={handleChange}
-              detailData={detailData}
-              page={1}
-            />
+            <Suspense fallback=''>
+              <FlightArea
+                centeredModal={centeredModal}
+                setCenteredModal={setCenteredModal}
+                handleChange={handleChange}
+                detailData={detailData}
+                page={1}
+              />
+            </Suspense>
           </div>
         </div>
         <div className='mt-1'>
@@ -1352,9 +1352,11 @@ export default function LaancStep1({
           handlerStep={handlerStep}
         /> */}
       </Modal>
-      <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
-      <InfoModal modal={isInfoModal} setModal={setIsInfoModal} />
-      <LaancModal modal={isLaancModal} setModal={setIsLaancModal} />
+      <Suspense fallback=''>
+        <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
+        <InfoModal modal={isInfoModal} setModal={setIsInfoModal} />
+        <LaancModal modal={isLaancModal} setModal={setIsLaancModal} />
+      </Suspense>
     </>
   );
 }

src/components/laanc/step/LaancStep2.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import '@styles/react/libs/flatpickr/flatpickr.scss';
 import { CheckCircle } from 'react-feather';
-import FlightArea from '../map/FlightArea';
 import {
   Row,
   Col,
@@ -20,6 +19,8 @@ import {
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import * as TermsActions from '../../../modules/account/register/actions/accountAction';
 
+const FlightArea = lazy(() => import('../map/FlightArea'));
+
 export default function LaancStep2({
   data,
   handlerStep,

src/components/map/mapbox/MapBoxMap.js

@@ -17,7 +17,7 @@ import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { DronToast } from './dron/DronToast';
 import { DronMarker } from './dron/DronMarker';
 import { DronPlan } from './dron/DronPlan';
-import { FeatureAirZone } from './feature/FeatureAirZone';
+import FeatureAirZone from './feature/FeatureAirZone';
 
 import threebox from 'threebox-plugin';
 

src/components/map/mapbox/feature/FeatureAirZone.js

@@ -26,7 +26,7 @@ const airPort = [
   }
 ];
 
-export const FeatureAirZone = props => {
+export default function FeatureAirZone(props) {
   let popup;
   const mapControl = useSelector(state => state.controlMapReducer);
 
@@ -343,4 +343,4 @@ export const FeatureAirZone = props => {
   };
 
   return null;
-};
+}

src/components/modal/ErrorModal.js

@@ -1,6 +1,6 @@
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
-export const ErrorModal = props => {
+export default function ErrorModal(props) {
   return (
     <div className='vertically-centered-modal'>
       <Modal
@@ -32,4 +32,4 @@ export const ErrorModal = props => {
       </Modal>
     </div>
   );
-};
+}

src/components/modal/InfoModal.js

@@ -1,6 +1,6 @@
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
-export const InfoModal = props => {
+export default function InfoModal(props) {
   return (
     <div className='vertically-centered-modal'>
       <Modal
@@ -32,4 +32,4 @@ export const InfoModal = props => {
       </Modal>
     </div>
   );
-};
+}

src/containers/basis/dron/BasisIdntfContainer.js

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Card, CardBody, Col, Row } from 'reactstrap';
 import { BasisIdntfForm } from '../../../components/basis/dron/BasisIdntform';
 import * as Actions from '../../../modules/basis/dron/actions/basisDronAction';
-import { ErrorModal } from '../../../components/modal/ErrorModal';
+import ErrorModal from '../../../components/modal/ErrorModal';
 export const BasisIdntfContainer = props => {
   const dispatch = useDispatch();
 

src/containers/basis/flight/plan/WeatherContainer.js

@@ -11,7 +11,7 @@ import {
 import dfsxyconv from '../../../../utility/dfsxyconv';
 import { FlightweatherAction } from '../../../../modules/basis/flight/actions/basisFlightAction';
 
-export function WeatherContainer({ mapAreaCoordList }) {
+export default function WeatherContainer({ mapAreaCoordList }) {
   const [dayData, setdayData] = useState({});
   const { loading } = useSelector(state => state.loadingReducer);
 
@@ -236,4 +236,3 @@ export function WeatherContainer({ mapAreaCoordList }) {
     </>
   );
 }
-export default WeatherContainer;

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -4,7 +4,7 @@ import { Button } from 'reactstrap';
 import { BasisGroupApprovalSearch } from '../../../components/basis/group/BasisGroupApprovalSearch';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
-import { InfoModal } from '../../../components/modal/InfoModal';
+import InfoModal from '../../../components/modal/InfoModal';
 import { BasisContainer } from '../BasisContainer';
 import { BasisDataGrid } from '../../../components/basis/BasisDataGrid';
 

src/containers/cstmrService/faq/FaqContainer.js

@@ -11,8 +11,8 @@ import {
 import FaqSearchBox from '../../../components/cstmrService/faq/FaqSearchBox';
 import FaqForm from '../../../components/cstmrService/faq/FaqForm';
 import FaqTab from '../../../components/cstmrService/faq/FaqTab';
-import { ErrorModal } from '../../../components/modal/ErrorModal';
-import { InfoModal } from '../../../components/modal/InfoModal';
+import ErrorModal from '../../../components/modal/ErrorModal';
+import InfoModal from '../../../components/modal/InfoModal';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 const tabList = [
   {

src/containers/cstmrService/inquiry/AdminInquiryContainer.js

@@ -12,7 +12,7 @@ import {
 import QnaSearchBox from '../../../components/cstmrService/inquiry/QnaSearchBox';
 import QnaGrid from '../../../components/cstmrService/inquiry/QnaGrid';
 import QnaDetail from '../../../components/cstmrService/inquiry/QnaDetail';
-import { InfoModal } from '../../../components/modal/InfoModal';
+import InfoModal from '../../../components/modal/InfoModal';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 
 const initalSearch = {

src/containers/cstmrService/inquiry/UserInquiryContainer.js

@@ -5,8 +5,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import dayjs from 'dayjs';
 import * as Actions from '../../../modules/cstmrService/inquiry/action';
 import InquiryWrite from '../../../components/cstmrService/inquiry/InquiryWrite';
-import { InfoModal } from '../../../components/modal/InfoModal';
-import { ErrorModal } from '../../../components/modal/ErrorModal';
+import InfoModal from '../../../components/modal/InfoModal';
+import ErrorModal from '../../../components/modal/ErrorModal';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 
 export default function UserInquiryContainer({ memberName }) {

src/containers/laanc/LaancContainer.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, lazy } from 'react';
+import { useEffect, useState, lazy, Suspense } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Button, Badge } from 'reactstrap';
 import { useDispatch } from 'react-redux';
@@ -6,13 +6,11 @@ import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
 import * as LaancAction from '../../modules/laanc/actions/laancActions';
 import * as AreaAction from '../../modules/basis/flight/actions/basisFlightAction';
 import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
-
+import { Link } from 'react-router-dom';
 const LaancPlanContainer = lazy(() => import('./LaancPlanContainer'));
-
 const LaancSearch = lazy(() =>
   import('../../components/laanc/list/LaancSearch')
 );
-
 const LaancGrid = lazy(() => import('../../components/laanc/list/LaancGrid'));
 
 export default function LaancContainer() {
@@ -59,9 +57,9 @@ export default function LaancContainer() {
       <div className='sub-text'>
         사업용 또는 비 사업용이며, 기체최대이륙중량이 2kg 초과 시 기체등록은
         필수입니다.
-        <a href='/laanc/report'>
+        <Link to='/laanc/report'>
           <Badge color='light-primary'>기체신고대상 및 기준 자세히보기</Badge>
-        </a>
+        </Link>
       </div>
       <div className='disabled-animation-modal'>
         <Button
@@ -73,16 +71,19 @@ export default function LaancContainer() {
         </Button>
 
         {disabledAnimation ? (
-          <LaancPlanContainer
-            currentParm={currentParm}
-            setDisabledAnimation={setDisabledAnimation}
-            disabledAnimation={disabledAnimation}
-          />
+          <Suspense fallback=''>
+            <LaancPlanContainer
+              currentParm={currentParm}
+              setDisabledAnimation={setDisabledAnimation}
+              disabledAnimation={disabledAnimation}
+            />
+          </Suspense>
         ) : null}
       </div>
-
-      <LaancSearch isSearch={isSearch} />
-      <LaancGrid isSearch={isSearch} />
+      <Suspense fallback=''>
+        <LaancSearch isSearch={isSearch} />
+        <LaancGrid isSearch={isSearch} />
+      </Suspense>
     </CustomMainLayout>
   );
 }

src/containers/laanc/LaancPlanContainer.js

@@ -1,15 +1,16 @@
-import { useEffect, useState } from 'react';
-import LaancStep1 from '../../components/laanc/step/LaancStep1'; // laanc step 1
-import LaancStep2 from '../../components/laanc/step/LaancStep2'; // laanc step 2
-import LaancStep3 from '../../components/laanc/step/LaacnStep3'; // laanc step 3
-import { ErrorModal } from '../../components/modal/ErrorModal';
-import { LaancModal } from '../../components/laanc/LaancModal';
+import { lazy, useEffect, useState, Suspense } from 'react';
+import LaancModal from '../../components/laanc/LaancModal';
 import { initFlightBas } from '../../modules/laanc/models/laancModels';
 import { Modal } from 'reactstrap';
 import { AREA_DETAIL_INIT } from '../../modules/basis/flight/actions/basisFlightAction';
 import { useDispatch, useSelector } from 'react-redux';
 import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
 
+const LaancStep1 = lazy(() => import('../../components/laanc/step/LaancStep1'));
+const LaancStep2 = lazy(() => import('../../components/laanc/step/LaancStep2'));
+const LaancStep3 = lazy(() => import('../../components/laanc/step/LaacnStep3'));
+const ErrorModal = lazy(() => import('../../components/modal/ErrorModal'));
+
 export default function LaancPlanContainer({
   currentParm,
   disabledAnimation,
@@ -76,45 +77,48 @@ export default function LaancPlanContainer({
           fade={false}
           backdrop={false}
         >
-          {step === 1 && (
-            <>
-              <LaancStep1
-                detailData={detailData}
-                setDetailData={setDetailData}
+          <Suspense fallback=''>
+            {step === 1 && (
+              <>
+                <LaancStep1
+                  detailData={detailData}
+                  setDetailData={setDetailData}
+                  centeredModal={centeredModal}
+                  setCenteredModal={setCenteredModal}
+                  currentParm={currentParm}
+                  handlerStep={handlerStep}
+                  handlerLaancClose={handlerLaancClose}
+                />
+              </>
+            )}
+            {step === 2 && (
+              <LaancStep2
+                handlerStep={handlerStep}
+                data={detailData}
+                disabledAnimation={disabledAnimation}
+                setDisabledAnimation={setDisabledAnimation}
                 centeredModal={centeredModal}
                 setCenteredModal={setCenteredModal}
-                currentParm={currentParm}
+                handlerLaancClose={handlerLaancClose}
+              />
+            )}
+            {step === 3 && (
+              <LaancStep3
                 handlerStep={handlerStep}
+                data={detailData}
+                disabledAnimation={disabledAnimation}
+                setDisabledAnimation={setDisabledAnimation}
                 handlerLaancClose={handlerLaancClose}
+                centeredModal={centeredModal}
+                setCenteredModal={setCenteredModal}
               />
-            </>
-          )}
-          {step === 2 && (
-            <LaancStep2
-              handlerStep={handlerStep}
-              data={detailData}
-              disabledAnimation={disabledAnimation}
-              setDisabledAnimation={setDisabledAnimation}
-              centeredModal={centeredModal}
-              setCenteredModal={setCenteredModal}
-              handlerLaancClose={handlerLaancClose}
-            />
-          )}
-          {step === 3 && (
-            <LaancStep3
-              handlerStep={handlerStep}
-              data={detailData}
-              disabledAnimation={disabledAnimation}
-              setDisabledAnimation={setDisabledAnimation}
-              handlerLaancClose={handlerLaancClose}
-              centeredModal={centeredModal}
-              setCenteredModal={setCenteredModal}
-            />
-          )}
+            )}
+          </Suspense>
         </Modal>
-
-        <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
-        <LaancModal modal={isLaancModal} setModal={setIsLaancModal} />
+        <Suspense fallback=''>
+          <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
+          <LaancModal modal={isLaancModal} setModal={setIsLaancModal} />
+        </Suspense>
       </div>
     </>
   );