await

src/client/js/components/Page/TagLabels.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -11,6 +11,8 @@ import EditorContainer from '../../services/EditorContainer';
 
 import TagEditModal from './TagEditModal';
 
+let tags = null;
+
 class TagLabels extends React.Component {
 
   constructor(props) {
@@ -23,6 +25,7 @@ class TagLabels extends React.Component {
     this.openEditorModal = this.openEditorModal.bind(this);
     this.closeEditorModal = this.closeEditorModal.bind(this);
     this.tagsUpdatedHandler = this.tagsUpdatedHandler.bind(this);
+    this.renderTagLabels = this.renderTagLabels.bind(this);
   }
 
   /**
@@ -30,7 +33,7 @@ class TagLabels extends React.Component {
    *   1. pageContainer.state.tags if isEditorMode is false
    *   2. editorContainer.state.tags if isEditorMode is true
    */
-  getEditTargetData() {
+  async getEditTargetData() {
     const { isEditorMode } = this.props;
     return (isEditorMode) ? this.props.editorContainer.state.tags : this.props.pageContainer.state.tags;
   }
@@ -72,31 +75,43 @@ class TagLabels extends React.Component {
   renderTagLabels() {
     const { t } = this.props;
     const { pageId } = this.props.pageContainer.state;
-    const tags = this.getEditTargetData();
 
-    if (tags.length === 0) {
+    const timeout = msec => new Promise((resolve) => {
+      setTimeout(resolve, msec);
+    });
+
+    if (tags !== null) {
+      if (tags.length === 0) {
+        return (
+          <a className="btn btn-link btn-edit-tags no-tags p-0 text-muted" onClick={this.openEditorModal}>
+            { t('Add tags for this page') } <i className="manage-tags ml-2 icon-plus"></i>
+          </a>
+        );
+      }
+
       return (
-        <a className="btn btn-link btn-edit-tags no-tags p-0 text-muted" onClick={this.openEditorModal}>
-          { t('Add tags for this page') } <i className="manage-tags ml-2 icon-plus"></i>
-        </a>
+        <>
+          {tags.map((tag) => {
+            return (
+              <span key={`${pageId}_${tag}`} className="text-muted">
+                <i className="tag-icon icon-tag mr-1"></i>
+                <a className="tag-name mr-2" href={`/_search?q=tag:${tag}`} key={`${pageId}_${tag}_link`}>{tag}</a>
+              </span>
+            );
+          })}
+          <a className="btn btn-link btn-edit-tags p-0 text-muted" onClick={this.openEditorModal}>
+            <i className="manage-tags ml-2 icon-plus"></i> { t('Edit tags for this page') }
+          </a>
+        </>
       );
+
     }
 
-    return (
-      <>
-        {tags.map((tag) => {
-          return (
-            <span key={`${pageId}_${tag}`} className="text-muted">
-              <i className="tag-icon icon-tag mr-1"></i>
-              <a className="tag-name mr-2" href={`/_search?q=tag:${tag}`} key={`${pageId}_${tag}_link`}>{tag}</a>
-            </span>
-          );
-        })}
-        <a className="btn btn-link btn-edit-tags p-0 text-muted" onClick={this.openEditorModal}>
-          <i className="manage-tags ml-2 icon-plus"></i> { t('Edit tags for this page') }
-        </a>
-      </>
-    );
+    throw new Promise(async(resolve) => {
+      await timeout(5000);
+      tags = await this.getEditTargetData();
+      resolve();
+    });
   }
 
   render() {
@@ -104,7 +119,9 @@ class TagLabels extends React.Component {
     return (
       <React.Fragment>
         <div className="tag-labels">
-          {this.renderTagLabels()}
+          <Suspense fallback={<p>Loading...</p>}>
+            <this.renderTagLabels />
+          </Suspense>
         </div>
 
         <TagEditModal

src/client/js/services/EditorContainer.js

@@ -24,7 +24,7 @@ export default class EditorContainer extends Container {
     }
 
     this.state = {
-      tags: [],
+      tags: null,
 
       isSlackEnabled: false,
       slackChannels: mainContent.getAttribute('data-slack-channels') || '',

src/client/js/services/PageContainer.js

@@ -59,7 +59,7 @@ export default class PageContainer extends Container {
       isDeleted:  JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
       isDeletable:  JSON.parse(mainContent.getAttribute('data-page-is-deletable')),
       isAbleToDeleteCompletely:  JSON.parse(mainContent.getAttribute('data-page-is-able-to-delete-completely')),
-      tags: [],
+      tags: null,
       hasChildren: JSON.parse(mainContent.getAttribute('data-page-has-children')),
       templateTagData: mainContent.getAttribute('data-template-tags') || null,