-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug] IndexTable
loading
prop does not always re-render loading UI when changed
#11803
Comments
LA1CH3
added
Bug
Something is broken and not working as intended in the system.
untriaged
labels
Mar 29, 2024
6 tasks
6 tasks
+1 on this issue. I am having the same issue. |
LA1CH3
added a commit
that referenced
this issue
Apr 24, 2024
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Closes #11803 <!-- link to issue if one exists --> Fixes an issue where the `loading` prop on `IndexTable` would not trigger the "loading panel" to appear. This was due to the `CSSTransition` component not functioning as expected and not applying expected CSS classes. I opted to ditch `CSSTransition` altogether and just directly apply the transitions in CSS for a simpler approach. <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? [Example in `web`](https://admin.web.pf-variants-save-refetch-after.jay-laiche.us.spin.dev/store/shop1/products/2) - Make price changes to any variants in the "variants" card and save the product - Observe that the "Loading variants..." panel appears after save, indicating reloading/refreshing of variants. It should disappear once reloading is complete. <details> <summary>Example video from storybook</summary> https://github.com/Shopify/polaris/assets/11605788/5b7b9e06-b268-41ba-ada2-8a4ccdd64bb6 </details> <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. Include a video if your changes include interactive content. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
Basically, it seems that the
loading
prop does not re-render the “loading” banner when theloading
prop changes. In fact, it seems you can basically never go fromfalse
totrue
and see it re-render. Only if you are going fromtrue
tofalse
will you see it. So, if the table is initially rendered withloading={true}
and then you have some flag that setsloading={false}
will you see it disappear. But if the table initially renders withloading={false}
and then some action causesloading={true}
, the banner does not appear.Expected behavior
The
"loading <resource name>"
UI should re-appear whenever theloading
prop changes totrue
.Actual behavior
Example codesandbox
Once the
IndexTable
is at any time rendered withloading={false}
, the "Loading" UI will never be shown until the component is completely re-mounted.Steps to reproduce
Link to sandbox
isLoading
totrue
Are you using React components?
Yes
Polaris version number
12.23.0
Browser
Chrome
Device
Macbook
The text was updated successfully, but these errors were encountered: