move suspense notif and markdown settings

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

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
 import loggerFactory from '@alias/logger';
 
@@ -9,13 +8,13 @@ import { toastError } from '../../../util/apiNotification';
 
 import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
 
-import RenderMarkDownSetting from './RenderMarkDownSetting';
+import MarkDownSettingPageContents from './MarkDownSettingPageContents';
 
 const logger = loggerFactory('growi:MarkDown');
 
 function MarkDownSetting(props) {
 
-  if (props.adminMarkDownContainer.state.isRetrieving) {
+  if (props.adminMarkDownContainer.state.isEnabledLinebreaks === 0) {
     throw new Promise(async() => {
       try {
         await props.adminMarkDownContainer.retrieveMarkdownData();
@@ -28,7 +27,7 @@ function MarkDownSetting(props) {
     });
   }
 
-  return <RenderMarkDownSetting />;
+  return <MarkDownSettingPageContents />;
 }
 
 const MarkdownSettingWrapper = withUnstatedContainers(MarkDownSetting, [AdminMarkDownContainer]);
@@ -38,4 +37,19 @@ MarkDownSetting.propTypes = {
   adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
 };
 
-export default withTranslation()(MarkdownSettingWrapper);
+function MarkdownSettingSuspenseWrapper(props) {
+  return (
+    <Suspense
+      fallback={(
+        <div className="row">
+          <i className="fa fa-5x fa-spinner fa-pulse mx-auto text-muted"></i>
+        </div>
+      )}
+    >
+      <MarkdownSettingWrapper />
+    </Suspense>
+  );
+}
+
+
+export default MarkdownSettingSuspenseWrapper;

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

@@ -7,7 +7,7 @@ import LineBreakForm from './LineBreakForm';
 import PresentationForm from './PresentationForm';
 import XssForm from './XssForm';
 
-class RenderMarkDownSetting extends React.Component {
+class MarkDownSettingPageContents extends React.Component {
 
   render() {
     const { t } = this.props;
@@ -40,8 +40,8 @@ class RenderMarkDownSetting extends React.Component {
 
 }
 
-RenderMarkDownSetting.propTypes = {
+MarkDownSettingPageContents.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 };
 
-export default withTranslation()(RenderMarkDownSetting);
+export default withTranslation()(MarkDownSettingPageContents);

src/client/js/components/Admin/Notification/NotificationSetting.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
 import loggerFactory from '@alias/logger';
 
@@ -9,13 +8,13 @@ import { toastError } from '../../../util/apiNotification';
 
 import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
 
-import RenderNotificationSetting from './RenderNotificationSetting';
+import NotificationSettingPageContents from './NotificationSettingPageContents';
 
 const logger = loggerFactory('growi:NotificationSetting');
 
 function NotificationSetting(props) {
 
-  if (props.adminNotificationContainer.state.isRetrieving) {
+  if (props.adminNotificationContainer.state.selectSlackOption === 0) {
     throw new Promise(async() => {
       try {
         await props.adminNotificationContainer.retrieveNotificationData();
@@ -27,7 +26,7 @@ function NotificationSetting(props) {
       }
     });
   }
-  return <RenderNotificationSetting />;
+  return <NotificationSettingPageContents />;
 }
 
 const NotificationSettingWrapper = withUnstatedContainers(NotificationSetting, [AdminNotificationContainer]);
@@ -38,4 +37,18 @@ NotificationSetting.propTypes = {
 
 };
 
-export default withTranslation()(NotificationSettingWrapper);
+function NotificationSettingSuspenseWrapper(props) {
+  return (
+    <Suspense
+      fallback={(
+        <div className="row">
+          <i className="fa fa-5x fa-spinner fa-pulse mx-auto text-muted"></i>
+        </div>
+      )}
+    >
+      <NotificationSettingWrapper />
+    </Suspense>
+  );
+}
+
+export default NotificationSettingSuspenseWrapper;

src/client/js/components/Admin/Notification/RenderNotificationSetting.jsx → src/client/js/components/Admin/Notification/NotificationSettingPageContents.jsx

@@ -9,7 +9,7 @@ import SlackAppConfiguration from './SlackAppConfiguration';
 import UserTriggerNotification from './UserTriggerNotification';
 import GlobalNotification from './GlobalNotification';
 
-class RenderNotificationSetting extends React.Component {
+class NotificationSettingPageContents extends React.Component {
 
   constructor() {
     super();
@@ -81,8 +81,8 @@ class RenderNotificationSetting extends React.Component {
 
 }
 
-RenderNotificationSetting.propTypes = {
+NotificationSettingPageContents.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 };
 
-export default withTranslation()(RenderNotificationSetting);
+export default withTranslation()(NotificationSettingPageContents);

src/client/js/services/AdminMarkDownContainer.js

@@ -19,7 +19,8 @@ export default class AdminMarkDownContainer extends Container {
 
     this.state = {
       retrieveError: null,
-      isEnabledLinebreaks: false,
+      // set dummy value tile for using suspense
+      isEnabledLinebreaks: 0,
       isEnabledLinebreaksInComments: false,
       pageBreakSeparator: 1,
       pageBreakCustomSeparator: '',

src/client/js/services/AdminNotificationContainer.js

@@ -19,7 +19,8 @@ export default class AdminNotificationContainer extends Container {
 
     this.state = {
       retrieveError: null,
-      selectSlackOption: 'Incoming Webhooks',
+      // set dummy value selectSlackOption for using suspense
+      selectSlackOption: 0,
       webhookUrl: '',
       isIncomingWebhookPrioritized: false,
       slackToken: '',