wip

Author: Jovert Lota Palonpon

resources/js/Backoffice.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import { HashRouter as Router } from 'react-router-dom';
 import { withWidth, CssBaseline, MuiThemeProvider } from '@material-ui/core';
 
@@ -204,32 +204,38 @@ class Backoffice extends Component {
         const { width } = this.props;
         const { loading, nightMode } = this.state;
 
+        const renderLoading = (
+            <Loading
+                pageProps={{
+                    ...this.state,
+                }}
+            />
+        );
+
         return (
             <MuiThemeProvider theme={nightMode ? darkTheme : lightTheme}>
                 <CssBaseline />
 
                 {loading ? (
-                    <Loading
-                        pageProps={{
-                            ...this.state,
-                        }}
-                    />
+                    renderLoading
                 ) : (
                     <Router>
-                        <Navigator
-                            pageProps={{
-                                ...this.state,
-                                width,
-                                environment: 'backoffice',
-                                routes: ROUTES,
-                                handleNightmodeToggled: this
-                                    .handleNightmodeToggled,
-                                refresh: this.refresh,
-                                authenticate: this.authenticate,
-                                handleLock: this.handleLock,
-                                handleSignout: this.handleSignout,
-                            }}
-                        />
+                        <Suspense fallback={renderLoading}>
+                            <Navigator
+                                pageProps={{
+                                    ...this.state,
+                                    width,
+                                    environment: 'backoffice',
+                                    routes: ROUTES,
+                                    handleNightmodeToggled: this
+                                        .handleNightmodeToggled,
+                                    refresh: this.refresh,
+                                    authenticate: this.authenticate,
+                                    handleLock: this.handleLock,
+                                    handleSignout: this.handleSignout,
+                                }}
+                            />
+                        </Suspense>
                     </Router>
                 )}
             </MuiThemeProvider>

resources/js/bootstrap.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-const moment = () => import('moment');
+import moment from 'moment';
 import Lang from 'lang.js';
 
 import { LOCALE } from './config';
@@ -23,7 +23,6 @@ if (token) {
 
 /**
  * Here, we will initialize our localization for the first time.
- *
  */
 window.Lang = new Lang({ messages: LOCALE });
 

resources/js/icons/1x1/index.js

@@ -1,2 +1,4 @@
-export { default as LightbulbOff } from './LightbulbOff';
-export { default as LightbulbOn } from './LightbulbOn';
+import loadable from '@loadable/component';
+
+export const LightbulbOff = loadable(() => import('./LightbulbOff'));
+export const LightbulbOn = loadable(() => import('./LightbulbOn'));

resources/js/icons/flags/1x1/index.js

@@ -1,2 +1,4 @@
-export { default as Ph } from './Ph';
-export { default as Us } from './Us';
+import loadable from '@loadable/component';
+
+export const Ph = loadable(() => import('./Ph'));
+export const Us = loadable(() => import('./Us'));

resources/js/icons/flags/4x3/index.js

@@ -1,2 +1,4 @@
-export { default as Ph } from './Ph';
-export { default as Us } from './Us';
+import loadable from '@loadable/component';
+
+export const Ph = loadable(() => import('./Ph'));
+export const Us = loadable(() => import('./Us'));

resources/js/ui/Snackbar.js

@@ -45,7 +45,7 @@ const Snackbar = props => {
     if (action && actionText) {
         primaryAction = (
             <Button key="undo" color="inherit" size="small" onClick={action}>
-                <Typography>{actionText}</Typography>
+                <Typography color="inherit">{actionText}</Typography>
             </Button>
         );
     }
@@ -88,7 +88,7 @@ const Snackbar = props => {
                             )}
                         />
 
-                        <Typography>{body}</Typography>
+                        <Typography color="inherit">{body}</Typography>
                     </span>
                 }
                 action={actions.reverse()}