suspense app settings page

src/client/js/admin.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'unstated';
 import { I18nextProvider } from 'react-i18next';
@@ -86,7 +86,14 @@ logger.info('unstated containers have been initialized');
  */
 Object.assign(componentMappings, {
   'admin-home': <AdminHome />,
-  'admin-app': <AppSettingsPage />,
+  'admin-app':
+  <Suspense fallback={(
+    <div className="row">
+      <i className="fa fa-5x fa-spinner fa-pulse mx-auto text-muted"></i>
+    </div>
+    )}
+  ><AppSettingsPage />
+  </Suspense>,
   'admin-markdown-setting': <MarkdownSetting />,
   'admin-customize': <Customize />,
   'admin-importer': <ImportDataPage />,

src/client/js/components/Admin/App/AppSettingsPage.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
@@ -12,31 +12,25 @@ import RenderAppSettingsPage from './RenderAppSettingsPage';
 
 const logger = loggerFactory('growi:appSettings');
 
-class AppSettingsPage extends React.Component {
-
-  async componentDidMount() {
-    const { adminAppContainer } = this.props;
-
-    try {
-      await adminAppContainer.retrieveAppSettingsData();
-    }
-    catch (err) {
-      toastError(err);
-      adminAppContainer.setState({ retrieveError: err.message });
-      logger.error(err);
-    }
-  }
-
-  render() {
-    return (
-      <Suspense fallback={<div className="text-center"><i className="fa fa-5x fa-spinner fa-pulse mx-auto text-muted"></i></div>}>
-        <RenderAppSettingsPage />
-      </Suspense>
-    );
+function AppSettingsPage(props) {
+
+  if (props.adminAppContainer.state.isRetrieving) {
+    throw new Promise(async() => {
+      try {
+        await props.adminAppContainer.retrieveAppSettingsData();
+      }
+      catch (err) {
+        toastError(err);
+        props.adminAppContainer.setState({ retrieveError: err.message });
+        logger.error(err);
+      }
+    });
   }
 
+  return <RenderAppSettingsPage />;
 }
 
+
 AppSettingsPage.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,

src/client/js/components/Admin/App/RenderAppSettingsPage.jsx

@@ -2,25 +2,15 @@ import React, { Fragment } from 'react';
 import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../../UnstatedUtils';
-
-import AdminAppContainer from '../../../services/AdminAppContainer';
-
 import AppSetting from './AppSetting';
 import SiteUrlSetting from './SiteUrlSetting';
 import MailSetting from './MailSetting';
 import AwsSetting from './AwsSetting';
 import PluginSetting from './PluginSetting';
 
-
-class AppSettingsPage extends React.Component {
+class RenderAppSettingsPage extends React.Component {
 
   render() {
-    // activate suspense
-    if (this.props.adminAppContainer.state.isRetrieving) {
-      throw new Promise(() => {});
-    }
-
     const { t } = this.props;
 
     return (
@@ -65,15 +55,8 @@ class AppSettingsPage extends React.Component {
 
 }
 
-AppSettingsPage.propTypes = {
+RenderAppSettingsPage.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  adminAppContainer: PropTypes.instanceOf(AdminAppContainer).isRequired,
 };
 
-/**
- * Wrapper component for using unstated
- */
-const AppSettingsPageWrapper = withUnstatedContainers(AppSettingsPage, [AdminAppContainer]);
-
-
-export default withTranslation()(AppSettingsPageWrapper);
+export default withTranslation()(RenderAppSettingsPage);