Merge pull request #14156 from jatinsonijs/show-workspace-list-empty-state-immediate

Fix workspace list empty state not showing immediate

Author: NikkiWines

src/libs/PolicyUtils.js

@@ -54,9 +54,31 @@ function getPolicyBrickRoadIndicatorStatus(policy, policyMembers) {
     return '';
 }
 
+/**
+ * Check if the policy can be displayed
+ * If offline, always show the policy pending deletion.
+ * If online, show the policy pending deletion only if there is an error.
+ * Note: Using a local ONYXKEYS.NETWORK subscription will cause a delay in
+ * updating the screen. Passing the offline status from the component.
+ * @param {Object} policy
+ * @param {Boolean} isOffline
+ * @returns {Boolean}
+ */
+function shouldShowPolicy(policy, isOffline) {
+    return policy
+    && policy.type === CONST.POLICY.TYPE.FREE
+    && policy.role === CONST.POLICY.ROLE.ADMIN
+    && (
+        isOffline
+        || policy.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE
+        || !_.isEmpty(policy.errors)
+    );
+}
+
 export {
     hasPolicyMemberError,
     hasPolicyError,
     hasCustomUnitsError,
     getPolicyBrickRoadIndicatorStatus,
+    shouldShowPolicy,
 };

src/pages/settings/InitialSettingsPage.js

@@ -130,10 +130,7 @@ class InitialSettingsPage extends React.Component {
      */
     getDefaultMenuItems() {
         const policiesAvatars = _.chain(this.props.policies)
-            .filter(policy => policy
-                && policy.type === CONST.POLICY.TYPE.FREE
-                && policy.role === CONST.POLICY.ROLE.ADMIN
-                && policy.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)
+            .filter(policy => PolicyUtils.shouldShowPolicy(policy, this.props.network.isOffline))
             .sortBy(policy => policy.name)
             .pluck('avatar')
             .value();

src/pages/workspace/WorkspacesListPage.js

@@ -23,6 +23,7 @@ import Permissions from '../../libs/Permissions';
 import Button from '../../components/Button';
 import FixedFooter from '../../components/FixedFooter';
 import BlockingView from '../../components/BlockingViews/BlockingView';
+import {withNetwork} from '../../components/OnyxProvider';
 
 const propTypes = {
     /* Onyx Props */
@@ -115,7 +116,7 @@ class WorkspacesListPage extends Component {
      */
     getWorkspaces() {
         return _.chain(this.props.policies)
-            .filter(policy => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN)
+            .filter(policy => PolicyUtils.shouldShowPolicy(policy, this.props.network.isOffline))
             .map(policy => ({
                 title: policy.name,
                 icon: policy.avatar ? policy.avatar : Expensicons.Building,
@@ -208,6 +209,7 @@ WorkspacesListPage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
+    withNetwork(),
     withOnyx({
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,