DTRA-1880 / Kate / [DTrader-V2] Chunks loading order issue

[kate-deriv]

Changes:

Issue N1
The issue is that styles was overwritten because of the loading order of css. When switching to Contract Details, we lazy-load component with quill styles (in Network a new chunk is added). As they arrive later, they overwrite some original css properties.
What was done: lazy loading was removed.
Issue N2
It turns out, that when Loading.DTraderV2 is rendered (from packages/core/src/App/app.jsx), html tag has no class. I checked quill-ui and quill-tokens and found out that value of the token depends on html tag class: if it's html.light - then the value of the token will be for light mode, if html.dark - for dark mode. In our case html have no class at all for the first second (so the default value of token will be dark) and only after that it gains the proper class.
What was done: added class to html tag in app.jsx (in useEffect) in order to apply it earlier

Screenshots:

Screen.Recording.2024-09-12.at.4.08.24.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Sep 16, 2024 10:03am

[github-actions]

A production App ID was automatically generated for this PR. (log)

• PR: DTRA-1880 / Kate / [DTrader-V2] Chunks loading order issue #16829
• URLs:
  • w/ App ID + Server: https://deriv-app-git-fork-kate-deriv-kate-dtra-1880fixstyleload-a963cf.binary.sx?qa_server=red.derivws.com&app_id=24089
  • Original: https://deriv-app-git-fork-kate-deriv-kate-dtra-1880fixstyleload-a963cf.binary.sx
• App ID: 24089

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/16829](https://github.com/binary-com/deriv-app/pull/16829)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-kate-deriv-kate-dtra-1880fixstyleload-a963cf.binary.sx?qa_server=red.derivws.com&app_id=24089
    - **Original**: https://deriv-app-git-fork-kate-deriv-kate-dtra-1880fixstyleload-a963cf.binary.sx
- **App ID**: `24089`

[github-actions]

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	28
🟧 Accessibility	70
🟢 Best practices	92
🟧 SEO	77
🟧 PWA	78

Lighthouse ran with https://deriv-app-git-fork-kate-deriv-kate-dtra-1880fixstyleload-a963cf.binary.sx/

[coveralls]

coverage: 52.232% (-0.03%) from 52.26%
when pulling 9a65512 on kate-deriv:kate/DTRA-1880/fix_style_loading_order
into d761e7f on binary-com:master.

[kate-deriv]

The issue is that styles was overwritten because of the loading order of css. When switching to Contract Details, we lazy-load component with quill styles (in Network a new chunk is added). As they arrive later, they overwrite some original css properties.

[kate-deriv]

We do not want to show loader for V2 in, let's say, trader's hub as isDTraderV2() doesn't check the location

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[kate-deriv]

The value of quill tokens is based on css selector: html.light - for light mode, html.dark - for dark mode. At the moment of loading, html tag has no class (for 1 sec), so the value of token is incorrect. Adding class in ui store allows to apply it from the very beginning.

[github-actions]

⏳ Generating Lighthouse report...