optimization: added lazy loading for all modals

.gitignore

@@ -7,8 +7,4 @@ gh-pages/
 npm-debug.log*
 build/
 *.sw[pomn]
-# That's /src/lib/aframe-loader-3dtiles-component.min.js
-dist/48406973e3ad4d65cbdd.js*
-dist/aframe-mapbox-component.min.js
-dist/notyf.min.css
-dist/viewer-styles.css
+dist

src/editor/components/Main.js

@@ -1,22 +1,24 @@
-import { Button, HelpButton, Logo, ZoomButtons } from './components';
-import { CameraToolbar } from './viewport';
-import { Compass32Icon } from '../icons';
 import { Component } from 'react';
-import ComponentsSidebar from './components/Sidebar';
+import { Compass32Icon } from '../icons';
 import Events from '../lib/Events';
-import { ModalHelp } from './modals/ModalHelp';
-import ModalTextures from './modals/ModalTextures';
+import { Button, HelpButton, Logo, ZoomButtons } from './components';
+import ComponentsSidebar from './components/Sidebar';
+import {
+  ModalHelp,
+  ModalTextures,
+  ProfileModal,
+  ScenesModal,
+  ScreenshotModal,
+  SignInModal
+} from './modals';
 import SceneGraph from './scenegraph/SceneGraph';
-import { ScreenshotModal } from './modals/ScreenshotModal';
-import TransformToolbar from './viewport/TransformToolbar';
+import { CameraToolbar, TransformToolbar } from './viewport';
 // import ViewportHUD from "./viewport/ViewportHUD";
 import { injectCSS } from '../lib/utils';
-import { SignInModal } from './modals/SignInModal';
-import { ProfileModal } from './modals/ProfileModal';
-import { ScenesModal } from './modals/ScenesModal';
-import { SceneEditTitle } from './components/SceneEditTitle';
 import { AddLayerButton } from './components/AddLayerButton';
 import { AddLayerPanel } from './components/AddLayerPanel';
+import { SceneEditTitle } from './components/SceneEditTitle';
+
 THREE.ImageUtils.crossOrigin = '';
 // Megahack to include font-awesome.
 injectCSS(

src/editor/components/modals/ModalTextures.js → src/editor/components/modals/ModalTextures/ModalTextures.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Events from '../../lib/Events';
-import Modal from './Modal.jsx';
-import { insertNewAsset } from '../../lib/assetsUtils';
+import Events from '../../../lib/Events.js';
+import Modal from '../Modal.jsx';
+import { insertNewAsset } from '../../../lib/assetsUtils.js';
 
 function getFilename(url, converted = false) {
   var filename = url.split('/').pop();
@@ -29,7 +29,7 @@ function getValidId(name) {
     .toLowerCase();
 }
 
-export default class ModalTextures extends React.Component {
+class ModalTextures extends React.Component {
   static propTypes = {
     isOpen: PropTypes.bool,
     onClose: PropTypes.func,
@@ -426,3 +426,5 @@ export default class ModalTextures extends React.Component {
     );
   }
 }
+
+export { ModalTextures };

src/editor/components/modals/ModalTextures/index.js

@@ -0,0 +1 @@
+export { ModalTextures } from './ModalTextures.js';

src/editor/components/modals/index.js

@@ -0,0 +1,45 @@
+import { lazy } from 'react';
+
+const ModalHelp = lazy(() =>
+  import('./ModalHelp').then((module) => ({ default: module.ModalHelp }))
+);
+const ModalTextures = lazy(() =>
+  import('./ModalTextures').then((module) => ({
+    default: module.ModalTextures
+  }))
+);
+const ScreenshotModal = lazy(() =>
+  import('./ScreenshotModal').then((module) => ({
+    default: module.ScreenshotModal
+  }))
+);
+const SignInModal = lazy(() =>
+  import('./SignInModal').then((module) => ({
+    default: module.SignInModal
+  }))
+);
+const ProfileModal = lazy(() =>
+  import('./ProfileModal').then((module) => ({
+    default: module.ProfileModal
+  }))
+);
+const ScenesModal = lazy(() =>
+  import('./ScenesModal').then((module) => ({
+    default: module.ScenesModal
+  }))
+);
+const SavingModal = lazy(() =>
+  import('./SavingModal').then((module) => ({
+    default: module.SavingModal
+  }))
+);
+
+export {
+  ModalHelp,
+  ModalTextures,
+  ScreenshotModal,
+  SignInModal,
+  ProfileModal,
+  ScenesModal,
+  SavingModal
+};

src/editor/components/scenegraph/Toolbar.js

@@ -9,7 +9,7 @@ import { Cloud24Icon, RemixIcon, Save24Icon, Upload24Icon } from '../../icons';
 import Events from '../../lib/Events';
 import { saveBlob } from '../../lib/utils';
 import { Button, ProfileButton, ScreenshotButton } from '../components';
-import { SavingModal } from '../modals/SavingModal';
+import { SavingModal } from '../modals';
 import { uploadThumbnailImage } from '../modals/ScreenshotModal/ScreenshotModal.component.jsx';
 import { sendMetric } from '../../services/ga.js';
 

src/editor/components/viewport/TransformToolbar.js

@@ -9,7 +9,7 @@ var TransformButtons = [
   { value: 'scale', icon: 'fa-expand' }
 ];
 
-export default class TransformToolbar extends React.Component {
+class TransformToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -93,3 +93,5 @@ export default class TransformToolbar extends React.Component {
     );
   }
 }
+
+export { TransformToolbar };

src/editor/components/viewport/index.js

@@ -1 +1,2 @@
 export { CameraToolbar } from './CameraToolbar';
+export { TransformToolbar } from './TransformToolbar';