From b8967dcdb4dd91d66fb509c5e2a69ed06f400156 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 20 Jun 2017 01:09:37 +0700
Subject: [PATCH] More accurate loading detection

---
 .../Moderation/components/Moderation.js       | 19 ++----------------
 .../Moderation/containers/Moderation.js       | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index 8c81ae18b..a5f823072 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -7,11 +7,9 @@ import SuspendUserDialog from './SuspendUserDialog';
 import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './ModerationMenu';
 import ModerationHeader from './ModerationHeader';
-import NotFoundAsset from './NotFoundAsset';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
 import UserDetail from '../containers/UserDetail';
 import StorySearch from '../containers/StorySearch';
-import {Spinner} from 'coral-ui';
 
 export default class Moderation extends Component {
   state = {
@@ -105,22 +103,9 @@ export default class Moderation extends Component {
   render () {
 
     const {root, moderation, settings, viewUserDetail, hideUserDetail, activeTab, ...props} = this.props;
-    const providedAssetId = this.props.params.id;
+    const assetId = this.props.params.id;
     const {asset} = root;
 
-    if (providedAssetId) {
-      if (asset === null) {
-
-        // Not found.
-        return <NotFoundAsset assetId={providedAssetId} />;
-      }
-      if (asset === undefined || asset.id !== providedAssetId) {
-
-        // Still loading.
-        return <Spinner />;
-      }
-    }
-
     const comments = root[activeTab];
     let activeTabCount;
     switch(activeTab) {
@@ -174,7 +159,7 @@ export default class Moderation extends Component {
           acceptComment={props.acceptComment}
           rejectComment={props.rejectComment}
           loadMore={props.loadMore}
-          assetId={providedAssetId}
+          assetId={assetId}
           sort={this.props.moderation.sortOrder}
           commentCount={activeTabCount}
           currentUserId={this.props.auth.user.id}
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 12a991454..86c46ac30 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -8,6 +8,7 @@ import * as notification from 'coral-admin/src/services/notification';
 import t, {timeago} from 'coral-framework/services/i18n';
 import update from 'immutability-helper';
 import truncate from 'lodash/truncate';
+import NotFoundAsset from '../components/NotFoundAsset';
 
 import {withSetUserStatus, withSuspendUser, withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {handleCommentChange} from '../../../graphql/utils';
@@ -214,14 +215,27 @@ class ModerationContainer extends Component {
   };
 
   render () {
-    const {root, data} = this.props;
+    const {root, root: {asset}, data, params: {id: assetId}} = this.props;
 
     if (data.error) {
       return <div>Error</div>;
     }
 
-    if (!('premodCount' in root)) {
-      return <div><Spinner/></div>;
+    if (assetId) {
+      if (asset === null) {
+
+        // Not found.
+        return <NotFoundAsset assetId={assetId} />;
+      }
+      if (asset === undefined || asset.id !== assetId) {
+
+        // Still loading.
+        return <Spinner />;
+      }
+    } else if(asset !== undefined || !('premodCount' in root)) {
+
+      // loading.
+      return <Spinner />;
     }
 
     return <Moderation