[Bug] `IndexTable` `loading` prop does not always re-render loading UI when changed

[LA1CH3]

Summary

Basically, it seems that the loading prop does not re-render the “loading” banner when the loading prop changes. In fact, it seems you can basically never go from false to true and see it re-render. Only if you are going from true to false will you see it. So, if the table is initially rendered with loading={true} and then you have some flag that sets loading={false} will you see it disappear. But if the table initially renders with loading={false} and then some action causes loading={true} , the banner does not appear.

Expected behavior

The "loading <resource name>" UI should re-appear whenever the loading prop changes to true.

Actual behavior

Example codesandbox

Once the IndexTable is at any time rendered with loading={false}, the "Loading" UI will never be shown until the component is completely re-mounted.

Steps to reproduce

Link to sandbox

1. Click "Toggle loading"
2. Observe the "loading" UI does not show
3. In the code, change the default value of isLoading to true
4. Observe loading UI is shown.
5. Click "Toggle loading" and observe loading UI goes away.
6. Try clicking "Toggle loading" again and observe loading UI does not re-appear.

Are you using React components?

Yes

Polaris version number

12.23.0

Browser

Chrome

Device

Macbook

[remy727]

+1 on this issue. I am having the same issue.