use suspense in markdown settings

src/client/js/components/Admin/MarkdownSetting/MarkDownSetting.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Card, CardBody } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -8,82 +7,35 @@ import loggerFactory from '@alias/logger';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 
-import AppContainer from '../../../services/AppContainer';
-import LineBreakForm from './LineBreakForm';
-import PresentationForm from './PresentationForm';
-import XssForm from './XssForm';
 import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
 
-const logger = loggerFactory('growi:MarkDown');
-
-class MarkdownSetting extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isRetrieving: true,
-    };
-
-  }
-
-  async componentDidMount() {
-    const { adminMarkDownContainer } = this.props;
-
-    try {
-      await adminMarkDownContainer.retrieveMarkdownData();
-      this.setState({ isRetrieving: false });
-    }
-    catch (err) {
-      toastError(err);
-      adminMarkDownContainer.setState({ retrieveError: err.message });
-      logger.error(err);
-    }
+import RenderMarkDownSetting from './RenderMarkDownSetting';
 
-  }
-
-  render() {
-    if (this.state.isRetrieving) {
-      return null;
-    }
-
-    const { t } = this.props;
-
-    return (
-      <React.Fragment>
-        {/* Line Break Setting */}
-        <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
-        </Card>
-        <LineBreakForm />
-
-        {/* Presentation Setting */}
-        <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
-        </Card>
-        <PresentationForm />
+const logger = loggerFactory('growi:MarkDown');
 
-        {/* XSS Setting */}
-        <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
-        <Card className="card well my-3">
-          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
-        </Card>
-        <XssForm />
-      </React.Fragment>
-    );
+function MarkDownSetting(props) {
+
+  if (props.adminMarkDownContainer.state.isRetrieving) {
+    throw new Promise(async() => {
+      try {
+        await props.adminMarkDownContainer.retrieveMarkdownData();
+      }
+      catch (err) {
+        toastError(err);
+        props.adminMarkDownContainer.setState({ retrieveError: err.message });
+        logger.error(err);
+      }
+    });
   }
 
+  return <RenderMarkDownSetting />;
 }
 
-const MarkdownSettingWrapper = withUnstatedContainers(MarkdownSetting, [AppContainer, AdminMarkDownContainer]);
+const MarkdownSettingWrapper = withUnstatedContainers(MarkDownSetting, [AdminMarkDownContainer]);
 
-MarkdownSetting.propTypes = {
+MarkDownSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
-
 };
 
 export default withTranslation()(MarkdownSettingWrapper);

src/client/js/components/Admin/MarkdownSetting/RenderMarkDownSetting.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Card, CardBody } from 'reactstrap';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import LineBreakForm from './LineBreakForm';
+import PresentationForm from './PresentationForm';
+import XssForm from './XssForm';
+
+class RenderMarkDownSetting extends React.Component {
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <React.Fragment>
+        {/* Line Break Setting */}
+        <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
+        </Card>
+        <LineBreakForm />
+
+        {/* Presentation Setting */}
+        <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
+        </Card>
+        <PresentationForm />
+
+        {/* XSS Setting */}
+        <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
+        </Card>
+        <XssForm />
+      </React.Fragment>
+    );
+  }
+
+}
+
+RenderMarkDownSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(RenderMarkDownSetting);

src/client/js/services/AdminMarkDownContainer.js

@@ -18,6 +18,7 @@ export default class AdminMarkDownContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
+      isRetrieving: true,
       retrieveError: null,
       isEnabledLinebreaks: false,
       isEnabledLinebreaksInComments: false,
@@ -48,6 +49,7 @@ export default class AdminMarkDownContainer extends Container {
       const { markdownParams } = response.data;
 
       this.setState({
+        isRetrieving: false,
         isEnabledLinebreaks: markdownParams.isEnabledLinebreaks,
         isEnabledLinebreaksInComments: markdownParams.isEnabledLinebreaksInComments,
         pageBreakSeparator: markdownParams.pageBreakSeparator,