Polaris-react: ResourceList - Empty State takes precedence over Loading State

[qw-in]

Issue summary

When ResourceList is loading it does not show the spinner if it is also empty. I'm not sure if this is the intended behaviour. I find it counterintuitive because on page load I will never have any items to display and loading will be true as they are fetched from the server.

I also found #426 but it does not seem to be fixed for me in 2.10.0

Expected behavior

When using the resource list I expect to see a loading spinner when my items={[]} and loading=true.

Actual behavior

When using the resource list I see an empty page banner when my items={[]} and loading=true.

Steps to reproduce the problem

1. Have a resource list
2. Set items to []
3. Set loading to true

Or just look at where it is in the code below

https://github.com/Shopify/polaris/blob/39078fe047b4916126868116b676570d18f491d5/src/components/ResourceList/ResourceList.tsx#L505-L517

Note that emptyMarkup does not contain the loadingOverlay

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 2.10.0
• Browser: Chrome (69-70)
• Device: Desktop
• Operating System: Linux

---

⚓️ We’re not accepting pull requests at this time

🗒 We _are_ accepting issue reports and feature requests

🌟 Feature requests that we can’t get to right away will be closed. However, we track all requests and will use it to set priorities. See the contribution guidelines for more information.

[solonaarmstrong-zz]

Thank you for the issue @qw-in. We have an internal issue opened for discussion about how to handle loading with no items. I will update this when we've implemented a solution.

[wuichen]

im having a similar problem related to this issue. if the items array has nothing inside when initialized, bulk action buttons do not appear even tho later on when the api received items to the array.

<ResourceList
            showHeader={true}
            resourceName={resourceName}
            items={this.props.items}
            renderItem={this.renderItem}
            selectedItems={this.state.selectedItems}
            onSelectionChange={this.handleSelectionChange}
            promotedBulkActions={promotedBulkActions}
          />

[solonaarmstrong-zz]

@wuichen Bulk actions are intended to be disabled when items are loading to prevent attempts at selecting an action that has no items to perform on.

[wuichen]

@solonaarmstrong i understand that part. but when the items prop received items from api(has greater length than 0), the action buttons are still disabled.

[solonaarmstrong-zz]

Oh, I see. I apologize, I misunderstood. I will have a look.

[dleroux]

This is fixed in our next release, which should be sometime next week.

[qw-in]

CHANGELOG.md

Removed empty state from ResourceList if there are no items and loading is true

Thanks @solonaarmstrong @dleroux! New release is great so far :smile:

[solonaarmstrong-zz]

Wonderful!