Merge pull request #702 from back4app/implementSuspense

Implement suspense

Author: nataliaconde

src/dashboard/Dashboard.js

@@ -12,12 +12,12 @@ import AppData from './AppData.react';
 import AppsIndex from './Apps/AppsIndex.react';
 import AppsManager from 'lib/AppsManager';
 import Browser from './Data/Browser/Browser.react';
-import CloudCode from './Data/CloudCode/B4ACloudCode.react';
+// import CloudCode from './Data/CloudCode/B4ACloudCode.react';
 import AppOverview from './Data/AppOverview/AppOverview.react';
 import Config from './Data/Config/Config.react';
 import FourOhFour from 'components/FourOhFour/FourOhFour.react';
 import GeneralSettings from './Settings/GeneralSettings.react';
-import GraphQLConsole from './Data/ApiConsole/GraphQLConsole.react';
+// import GraphQLConsole from './Data/ApiConsole/GraphQLConsole.react';
 // import HostingSettings from './Settings/HostingSettings.react';
 import HubConnections from './Hub/HubConnections.react';
 import IndexManager from './IndexManager/IndexManager.react'
@@ -36,7 +36,7 @@ import { get } from 'lib/AJAX';
 import { setBasePath } from 'lib/AJAX';
 import ServerSettings from 'dashboard/ServerSettings/ServerSettings.react';
 import { Helmet } from 'react-helmet';
-import Playground from './Data/Playground/Playground.react';
+// import Playground from './Data/Playground/Playground.react';
 import axios from 'lib/axios';
 // import moment from 'moment';
 import B4aConnectPage from './B4aConnectPage/B4aConnectPage.react';
@@ -49,7 +49,7 @@ import PushDetails from './Push/PushDetails.react';
 import PushIndex from './Push/PushIndex.react';
 import PushNew from './Push/PushNew.react';
 // import PushSettings from './Settings/PushSettings.react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, Suspense, lazy } from 'react';
 import RestConsole from './Data/ApiConsole/RestConsole.react';
 // import SchemaOverview from './Data/Browser/SchemaOverview.react';
 import SecuritySettings from './Settings/SecuritySettings.react';
@@ -66,6 +66,10 @@ import back4app2 from '../lib/back4app2';
 import { initializeAmplitude } from 'lib/amplitudeEvents';
 import { setUser as setSentryUser } from '@sentry/react';
 
+const LazyGraphQLConsole = lazy(() => import('./Data/ApiConsole/GraphQLConsole.react'));
+const LazyPlayground = lazy(() => import('./Data/Playground/Playground.react'));
+const LazyCloudCode = lazy(() => import('./Data/CloudCode/B4ACloudCode.react'));
+
 const ShowSchemaOverview = false; //In progress features. Change false to true to work on this feature.
 
 // class Empty extends React.Component {
@@ -150,6 +154,44 @@ const waitForScriptToLoad = async conditionFn => {
   throw new Error('Script not loaded yet!');
 };
 
+const preloadMap = {
+  cloudCode: () => import('./Data/CloudCode/B4ACloudCode.react'),
+  graphqlConsole: () => import('./Data/ApiConsole/GraphQLConsole.react'),
+  playground: () => import('./Data/Playground/Playground.react'),
+};
+
+// Preload all routes with proper error handling and logging
+const preloadRoute = async (routeName, preloadFn) => {
+  try {
+    await preloadFn();
+    console.log(`Successfully preloaded route: ${routeName}`);
+  } catch (err) {
+    console.error(`Error preloading route ${routeName}:`, err);
+  }
+};
+
+// Preload all routes in parallel
+const preloadAllRoutes = () => {
+  console.log('Preloading routes...');
+  return Promise.all(
+    Object.entries(preloadMap).map(([routeName, preloadFn]) =>
+      preloadRoute(routeName, preloadFn)
+    )
+  );
+};
+
+const LoadingComponent = () => (
+  <div className={baseStyles.center} style={{ background: '#0F1C32' }}>
+    <B4aLoader />
+  </div>
+);
+
+const LazyComponentWrapper = ({ children }) => (
+  <Suspense fallback={<LoadingComponent />}>
+    {children}
+  </Suspense>
+);
+
 class Dashboard extends React.Component {
   constructor(props) {
     super();
@@ -167,6 +209,11 @@ class Dashboard extends React.Component {
   }
 
   componentDidMount() {
+    // Start preloading routes immediately but don't block on it
+    preloadAllRoutes().finally(() => {
+      console.log('Route preloading complete');
+    });
+
     get('/parse-dashboard-config.json').then(({ apps, newFeaturesInLatestVersion = [], user }) => {
       fetchHubUser().then(userDetail => {
         user.createdAt = userDetail.createdAt;
@@ -390,8 +437,8 @@ class Dashboard extends React.Component {
     const ApiConsoleRoute = (
       <Route element={<ApiConsole />}>
         <Route path="rest" element={<RestConsole />} />
-        <Route path="graphql" element={<GraphQLConsole />} />
-        <Route path="js_console" element={<Playground />} />
+        <Route path="graphql" element={<LazyComponentWrapper><LazyGraphQLConsole /></LazyComponentWrapper>} />
+        <Route path="js_console" element={<LazyComponentWrapper><LazyPlayground /></LazyComponentWrapper>} />
         <Route index element={<Navigate replace to="rest" />} />
       </Route>
     );
@@ -407,7 +454,7 @@ class Dashboard extends React.Component {
         <Route path="browser/:className" element={<BrowserRoute />} />
         <Route path="browser" element={<BrowserRoute />} />
 
-        <Route path="cloud_code" element={<CloudCode />} />
+        <Route path="cloud_code" element={<LazyComponentWrapper><LazyCloudCode /></LazyComponentWrapper>} />
         <Route path="webhooks" element={<Webhooks />} />
 
         <Route path="jobs">{JobsRoute}</Route>

src/dashboard/Data/AppOverview/AppOverview.react.js

@@ -6,7 +6,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import DashboardView from 'dashboard/DashboardView.react';
 import styles from 'dashboard/Data/AppOverview/AppOverview.scss';
 import { withRouter } from 'lib/withRouter';
@@ -18,11 +18,12 @@ import AppSecurityCard from './AppSecurityCard.react';
 import AppPerformanceCard from './AppPerformanceCard.react';
 import AppLoadingText from './AppLoadingText.react';
 import B4aTooltip from 'components/Tooltip/B4aTooltip.react';
-import ConnectAppModal from './ConnectAppModal.react';
+// import ConnectAppModal from './ConnectAppModal.react';
 import OnboardingBoxes from './OnboardingBoxes.react';
 import AccountManager from 'lib/AccountManager';
 import { amplitudeLogEvent } from 'lib/amplitudeEvents';
 
+const LazyConnectAppModal = lazy(() => import('./ConnectAppModal.react'));
 @withRouter
 class AppOverview extends DashboardView {
   constructor() {
@@ -73,6 +74,10 @@ class AppOverview extends DashboardView {
     this.loadCardInformation();
   }
 
+  componentDidMount() {
+    import('./ConnectAppModal.react');
+  }
+
   copyText(copyText = '') {
     if (navigator) {
       navigator.clipboard.writeText(copyText);
@@ -303,7 +308,9 @@ class AppOverview extends DashboardView {
         </div>
 
         {this.state.showConnectAppModal && (
-          <ConnectAppModal closeModal={() => this.setState({ showConnectAppModal: false })} />
+          <Suspense fallback={'Loading...'}>
+            <LazyConnectAppModal closeModal={() => this.setState({ showConnectAppModal: false })} />
+          </Suspense>
         )}
       </div>
     );

src/dashboard/index.js

@@ -9,14 +9,18 @@ import './instrument';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import Immutable from 'immutable';
-import installDevTools from 'immutable-devtools';
+// import installDevTools from 'immutable-devtools';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Dashboard from './Dashboard';
 
 require('stylesheets/fonts.scss');
 require('graphiql/graphiql.min.css');
-installDevTools(Immutable);
+
+if (process.env.NODE_ENV !== 'production') {
+  const installDevTools = require('immutable-devtools');
+  installDevTools(Immutable);
+}
 
 const path = window.PARSE_DASHBOARD_PATH || '/';
 ReactDOM.render(<Dashboard path={path} />, document.getElementById('browser_mount'));

webpack/homolog.config.js

@@ -5,8 +5,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 configuration.plugins.push(
   new webpack.DefinePlugin({
     'process.env': {
-      'NODE_ENV': JSON.stringify('homolog'),
-      'SENTRY_ENV': JSON.stringify('homolog')
+      'NODE_ENV': JSON.stringify('homolog')
     }
   }),
   new webpack.SourceMapDevToolPlugin({
@@ -38,4 +37,4 @@ configuration.optimization = {
   ]
 }
 
-module.exports = configuration;
+module.exports = configuration;