AGGrid does not load theme css on first time load, On refresh theme is applied

ag-grid / ag-grid

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

http://www.ag-grid.com

Other

12.48k stars 1.84k forks source link

AGGrid does not load theme css on first time load, On refresh theme is applied #8325

Open panther008 opened 1 month ago

panther008 commented 1 month ago

I'm submitting a ...

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

Providing a Reproducible Scenario Accepted reproducible scenarios are

Ag Grid theme ag-theme-quartz-dark, does not apply on first load, we have to refresh every time to load the theme

Current behavior

Ag Grid theme ag-theme-quartz-dark, does not apply on first load, we have to refresh every time to load the theme

Expected behavior

Ag Grid theme ag-theme-quartz-dark, should be populated on first load

Please tell us about your environment: Windows 11, VS code, "ag-grid-react": "^31.0.3",

AG Grid version: 31.0.3
Browser: Chrome
Language: [all | TypeScript X.X | ES6/7 | ES5]

umardev1 commented 1 month ago

facing this same issue, css not loading on initial render

AG-Zoheil commented 1 month ago

Thank you for reporting this.

We'd be happy to look into this, but the most efficient way for us to do so would be for you to provide a live example reproducing the issue.

Please send us a live plunker sample which shows the issue. You can use one of the examples from our website as a starting point. Do let us know if you need further guidance on this.

We're looking forward to your response.

Kind regards, Zoheil

panther008 commented 1 month ago

@AG-Zoheil it occurs randomly , I am unable to reproduce this as it works fine some time and sometime the issue gets generated.I have attached the screen shot as well, you can see the background is totally white although I have set the theme

CodrinSocol commented 3 weeks ago

@AG-Zoheil I am encountering the same issue. We have a Next.js project set up and on initial render, the table does not load any CSS at all. After refreshing the page the first time, the CSS then loads up normally every time afterwards.

First Render:

Successive Renders:

I tried manually importing the theme, but to no success. I tried importing it like this: import "ag-grid-community/styles/ag-theme-quartz.css"

This issue happens both in development and production builds.