Task: Implement lazy loading

config/webpack.config.js

@@ -161,6 +161,7 @@ module.exports = function (webpackEnv) {
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
       filename: 'static/js/graph-explorer-v2.js',
+      chunkFilename: 'static/js/graph-explorer.chunk.[name].[chunkhash].js',
       // We inferred the "public path" (such as / or /my-project) from homepage.
       // We use "/" in development.
       publicPath,
@@ -413,7 +414,7 @@ module.exports = function (webpackEnv) {
     },
     plugins: [
       new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 1
+        maxChunks: 50
       }),
       new MonacoWebpackPlugin({
         languages: [

src/app/services/hooks/usePopups.ts

@@ -1,10 +1,24 @@
-import { PopupItem, popups } from '../../views/common/registry/popups';
+import {
+  ShareQuery, FullPermissions, PreviewCollection, ThemeChoser
+} from '../../views/common/lazy-loader/component-registry';
 import {
   POPUPS, PopupsProps, PopupsType,
   UsePopupsResponse,
   usePopupsDispatchContext, usePopupsStateContext
 } from '../context/popups-context';
 
+type PopupItem =
+  'share-query' |
+  'theme-chooser' |
+  'preview-collection' |
+  'full-permissions';
+
+const popups = new Map<string, any>([
+  ['share-query', ShareQuery],
+  ['theme-chooser', ThemeChoser],
+  ['preview-collection', PreviewCollection],
+  ['full-permissions', FullPermissions]
+])
 
 const usePopups = <Data = {}>(item: PopupItem , type: PopupsType,
   reference?: string): UsePopupsResponse<Data> => {

src/app/views/App.tsx

@@ -26,19 +26,19 @@ import { GRAPH_URL } from '../services/graph-constants';
 import { parseSampleUrl } from '../utils/sample-url-generation';
 import { substituteTokens } from '../utils/token-helpers';
 import { translateMessage } from '../utils/translate-messages';
-import { StatusMessages, TermsOfUseMessage } from './app-sections';
+import { TermsOfUseMessage } from './app-sections';
+import { StatusMessages } from './common/lazy-loader/component-registry';
 import { headerMessaging } from './app-sections/HeaderMessaging';
 import { appStyles } from './App.styles';
 import { classNames } from './classnames';
-import { KeyboardCopyEvent } from './common/copy/KeyboardCopyEvent';
+import { KeyboardCopyEvent } from './common/copy-button/KeyboardCopyEvent';
 import PopupsWrapper from './common/popups/PopupsWrapper';
 import { createShareLink } from './common/share';
 import { MainHeader } from './main-header/MainHeader';
 import { QueryResponse } from './query-response';
 import { QueryRunner } from './query-runner';
 import { parse } from './query-runner/util/iframe-message-parser';
 import { Sidebar } from './sidebar/Sidebar';
-
 export interface IAppProps {
   theme?: ITheme;
   styles?: object;

src/app/views/authentication/profile/Profile.tsx

@@ -15,7 +15,6 @@ import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { authenticationStyles } from '../Authentication.styles';
 import { profileStyles } from './Profile.styles';
-
 const getInitials = (name: string) => {
   let initials = '';
   if (name && name !== '') {

src/app/views/common/copy/CopyButton.tsx → src/app/views/common/copy-button/CopyButton.tsx

@@ -9,7 +9,7 @@ interface ICopyButtonProps {
   isIconButton: boolean;
 }
 
-export function CopyButton(props:ICopyButtonProps) {
+export default function CopyButton(props:ICopyButtonProps) {
   const [copied, setCopied] = useState(false);
 
   const copyIcon: IIconProps = {

src/app/views/common/copy/KeyboardCopyEvent.ts → src/app/views/common/copy-button/KeyboardCopyEvent.ts

@@ -20,7 +20,7 @@ export const KeyboardCopyEvent = () => {
     });
     const filteredTargetIds = targetIds.filter((value) => value !== null)!;
     const componentName = Object.keys(componentList).find(key => filteredTargetIds.includes(key));
-    return componentName || '';
+    return componentName ?? '';
   }
 
   const getTargetId = (target: EventTarget) => {

src/app/views/common/copy-button/index.ts

@@ -0,0 +1,2 @@
+import CopyButton from './CopyButton';
+export default CopyButton;

src/app/views/common/error-boundary/ErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import { Label } from '@fluentui/react';
 import React, { ReactNode, useState, useEffect } from 'react';
-
 import { translateMessage } from '../../../utils/translate-messages';
 
 interface Props {
@@ -27,7 +26,7 @@ function ErrorBoundary(props: Props) {
   };
 
   if (state.hasError) {
-    return <Label>{translateMessage('Something went wrong')}</Label>;
+    return <Label>{translateMessage('Something went wrong. Reload the tab again')}</Label>;
   } else {
     return (
       <React.Fragment>
@@ -39,4 +38,4 @@ function ErrorBoundary(props: Props) {
   }
 }
 
-export default ErrorBoundary;
+export default ErrorBoundary;

src/app/views/common/lazy-loader/component-registry/index.tsx

@@ -0,0 +1,156 @@
+/* eslint-disable max-len */
+import { lazy } from 'react';
+import { IPermissionProps } from '../../../../../types/permissions';
+import { SuspenseLoader } from '../suspense-loader/SuspenseLoader';
+
+const LazySpecificPermissions = lazy(() =>
+  import(/* webpackChunkName: "permissions" */ '../../../query-runner/request/permissions'));
+const LazyStatusMessages = lazy( () =>
+  import(/* webpackChunkName: "statusMessages" */ '../../../app-sections/StatusMessages'));
+const LazyResponseHeaders = lazy(() =>
+  import(/* webpackChunkName: "responseHeaders" */ '../../../query-response/headers/ResponseHeaders'));
+const LazyAdaptiveCard = lazy(() =>
+  import(/* webpackChunkName: "adaptiveCards" */ '../../../query-response/adaptive-cards/AdaptiveCard'));
+const LazyGraphToolkit = lazy(() =>
+  import(/* webpackChunkName: "graphToolkit" */ '../../../query-response/graph-toolkit/GraphToolkit'));
+const LazySnippets = lazy(() =>
+  import(/* webpackChunkName: "code snippets" */ '../../../query-response/snippets/Snippets'));
+const LazyCopyButton = lazy(() =>
+  import(/* webpackChunkName: "copy button" */ '../../copy-button/CopyButton'));
+const LazyAuth = lazy(() =>
+  import(/* webpackChunkName: "authTab" */ '../../../query-runner/request/auth/Auth'));
+const LazyRequestHeaders = lazy(() =>
+  import(/* webpackChunkName: "requestHeaders" */ '../../../query-runner/request/headers/RequestHeaders'));
+const LazyHistory = lazy(() =>
+  import(/* webpackChunkName: "history" */ '../../../sidebar/history/History'));
+const LazyResourceExplorer = lazy(() =>
+  import(/* webpackChunkName: "resourceExplorer" */ '../../../sidebar/resource-explorer/ResourceExplorer'));
+const LazyShareQuery = lazy(() =>
+  import(/* webpackChunkName: "share query" */ '../../../query-runner/query-input/share-query/ShareQuery'));
+const LazyThemeChoser = lazy(() =>
+  import(/* webpackChunkName: "theme chooser" */ '../../../main-header/settings/ThemeChooser'));
+const LazyPreviewCollection = lazy(() =>
+  import(/* webpackChunkName: "preview collection" */ '../../../sidebar/resource-explorer/collection/PreviewCollection'));
+const LazyFullPermissions = lazy(() =>
+  import(/* webpackChunkName: "full permissions" */ '../../../query-runner/request/permissions/Permissions.Full'));
+
+export const Permission = (props?: IPermissionProps) => {
+  return (
+    <SuspenseLoader>
+      <LazySpecificPermissions {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const StatusMessages = () => {
+  return (
+    <SuspenseLoader>
+      <LazyStatusMessages />
+    </SuspenseLoader>
+  )
+}
+
+export const AdaptiveCards = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyAdaptiveCard {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const GraphToolkit = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyGraphToolkit {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const ResponseHeaders = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyResponseHeaders {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const Snippets = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazySnippets {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const CopyButton = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyCopyButton {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const Auth = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyAuth {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const RequstHeaders = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyRequestHeaders {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const History = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyHistory {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const ResourceExplorer = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyResourceExplorer {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const ShareQuery = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyShareQuery {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const ThemeChoser = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyThemeChoser {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const PreviewCollection = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyPreviewCollection {...props} />
+    </SuspenseLoader>
+  )
+}
+
+export const FullPermissions = (props?: any) => {
+  return (
+    <SuspenseLoader>
+      <LazyFullPermissions {...props} />
+    </SuspenseLoader>
+  )
+}
+

src/app/views/common/lazy-loader/suspense-loader/SuspenseLoader.tsx

@@ -0,0 +1,16 @@
+import { Spinner, SpinnerSize } from '@fluentui/react';
+import { Suspense } from 'react';
+import ErrorBoundary from '../../error-boundary/ErrorBoundary';
+
+interface SuspenseChildren{
+  children: React.ReactNode;
+}
+export const SuspenseLoader = ({ children }: SuspenseChildren) => {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<Spinner size={SpinnerSize.large} />}>
+        {children}
+      </Suspense>
+    </ErrorBoundary >
+  );
+}