Polaris-react: Table shows up inconsistently and have to resize window to make it show

[flewid]

Issue summary

Using the polaris table, on initial page load, the table lines are all out of whack.

Expected behavior

The page should show the table properly on initial load.

Actual behavior

When we load the page, the table is messed up, then, we resize the window and it corrects itself.

Steps to reproduce the problem

1. Create DataTable
2. Visit App
3. See how lines are

here is screenshot before
https://www.dropbox.com/s/fx0jqai6td3qvo8/Screenshot%202018-06-06%2013.02.40.png?dl=0

here is after resizing of window
https://www.dropbox.com/s/qsoqhogbzlfgqjx/Screenshot%202018-06-06%2013.03.04.png?dl=0

1. The problem is relating to long names in the first row.

Specifications

• Polaris version: 2.0.0 and 2.1.1
• React version: 16.4.0
• Browser: chrome / firefox
• Device: desktop
• Operating System: macos /windows

[chloerice]

Hi @flewid, thank you for raising this. Is this happening in development? We haven't been able to reproduce, but this problem has been had in the past because in development the styles take longer to inject. The height calculations get deferred in development, but only if your environment is set (NODE_ENV=development).

Can you run a production build and verify whether this occurs in production for you?

[flewid]

Thanks we'll check it and let you know

On Wed, 6 Jun 2018 at 15:17, Chloe Rice [e-mail] wrote:

Hi @flewid https://github.com/flewid is this in development? We haven't
been able to reproduce, but this problem has been had in the past because
in development the styles take longer to inject. The height calculations
get deferred in development, but only if your environment is set (
NODE_ENV=development).

Can you run a production build and verify whether this occurs in
production for you?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Shopify/polaris/issues/344#issuecomment-395182751,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA6jz6ks_1HWZX2wnr2n_STP5jylG3DBks5t6CqugaJpZM4UdCK5
.

--

∴ Matthew Gibson

CEO / Owner

Flewid Incorporated

Mobile: [phone]

Office: +1.613.261.9889

flewid.ca | google+ https://plus.google.com/+FlewidCa/posts | facebook
https://www.facebook.com/flewidinc

[flewid]

we just tried NODE_ENV=production and experience the same issue

On Wed, 6 Jun 2018 at 16:28, Matthew Gibson [e-mail] wrote:

Thanks we'll check it and let you know

On Wed, 6 Jun 2018 at 15:17, Chloe Rice [e-mail] wrote:

Hi @flewid https://github.com/flewid is this in development? We
haven't been able to reproduce, but this problem has been had in the past
because in development the styles take longer to inject. The height
calculations get deferred in development, but only if your environment is
set (NODE_ENV=development).

Can you run a production build and verify whether this occurs in
production for you?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Shopify/polaris/issues/344#issuecomment-395182751,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA6jz6ks_1HWZX2wnr2n_STP5jylG3DBks5t6CqugaJpZM4UdCK5
.

--

∴ Matthew Gibson

CEO / Owner

Flewid Incorporated

Mobile: [phone]

Office: +1.613.261.9889

flewid.ca | google+ https://plus.google.com/+FlewidCa/posts | facebook
https://www.facebook.com/flewidinc

--

∴ Matthew Gibson

CEO / Owner

Flewid Incorporated

Mobile: [phone]

Office: +1.613.261.9889

flewid.ca | google+ https://plus.google.com/+FlewidCa/posts | facebook
https://www.facebook.com/flewidinc

[chloerice]

@flewid Did you run your app in production and test, or just change the environment variable while running the development build? Sorry I wasn't very clear. If your NODE_ENV environment while running in development mode locally is set to "development", the table calculations are deferred to give the styles enough time to inject. If your development build does not set NODE_ENV=development, there is a possibility that there may be broken styles at final render due to the JavaScript running before the CSS is completely loaded.

What I'm wondering is whether or not this issue is happening while you are running your app in development locally (with webpack running react-hot-loader etc), or if this is happening in _production_ (or while running a production build locally).

To view and manually test your app in production if your app is not currently published, yarn build (or whatever your production build script is) then run your production build with yarn start (or whatever your production start script is). Then test whether the data table rows are broken on first render.

[flewid]

Okay thanks. We'll continue working on it and update this if it's a problem
in production.

On Wed, 6 Jun 2018 at 21:44, Chloe Rice [e-mail] wrote:

@flewid https://github.com/flewid Did you run your app in production
and test, or just change the environment variable while running the
development build? Sorry I wasn't very clear. If your NODE_ENV
environment while running in development mode locally is set to
"development", the table calculations are deferred to give the styles
enough time to inject. If your development build does not set
NODE_ENV=development, there is the possibility of there may be broken
styles at final render due to the JavaScript running before the CSS is
completely loaded.

What I'm wondering is whether or not this issue is happening while you are
running your app in development locally (with webpack running
react-hot-loader etc), or if this is happening in production (or while
running a production build locally).

To view and manually test your app in production if your app is not
currently published, yarn build (or whatever your production build script
is) then run your production build with yarn start (or whatever your
production start script is). Then test whether the data table rows are
broken on first render.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Shopify/polaris/issues/344#issuecomment-395266225,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA6jz-G0LQB_Q3xO1R_R9piLA8IIFEcbks5t6IWQgaJpZM4UdCK5
.

--

∴ Matthew Gibson

CEO / Owner

Flewid Incorporated

Mobile: [phone]

Office: +1.613.261.9889

flewid.ca | google+ https://plus.google.com/+FlewidCa/posts | facebook
https://www.facebook.com/flewidinc

[neatab]

Hello. I found this while looking into the same issue. I am having the same problem as @flewid and it is occurring in both production and dev. As soon as I resize the window, everything looks good. But when the data table first loads, the height of the cells is incorrect if there is long text in the first column.

[chloerice]

Thanks for letting us know @neatab. I'll pick up trying to reproduce and keep y'all updated through this issue.

[neatab]

Thanks @chloerice. Please let me know if I can provide any more information or if you want me to try anything.

[neatab]

Hi @dleroux and @chloerice. It looks like this issue was closed but the issue is still occurring. Were you not able to reproduce the issue? Is there anything I can do to help resolve this issue?

[dleroux]

@neatab, sorry the issue was fixed internally but has not been released yet. Should be released some time next week.

[chloerice]

@neatab The fix shipped today with v2.3.1 😃

[neatab]

Thank you! I'll update right now and post back here to verify everything is working.

[neatab]

Looks perfect. Thanks for your help @chloerice and @dleroux 😄

[dleroux]

Awesome. Glad it worked out for you.