search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
285 stars 76 forks source link

CCR don't fully load all components on initial load or refresh (f5) #7975

Closed arjanvanzutphen closed 10 months ago

arjanvanzutphen commented 11 months ago

Check existing issues

Actual Behavior

Calcite Components in React don't get completely loaded on the initial load. It's mostly icons that are directly not visible. After saving the right file (containing the components) in VS Code, the page gets refreshed and the application shows all components.

Before (behavior after a f5 refresh): image After (behavior after saving the App.jsx in VS Code: image

Expected Behavior

All components are shown as they should on the initial load.

Reproduction Sample

https://github.com/arjanvanzutphen/ccr-initial-loading-issue

Reproduction Steps

  1. Clone the repo
  2. Open the files in your IDE, I've used VS Code
  3. Run npm install and npm run dev
  4. A browser will show the page at, most likely http://localhost:5173
  5. The banana icon is visible and the slider component is missing the 50 value on it's line.
  6. Hit save (or ctrl+s) in VS Code and the icon becomes visible and the slider gets updated

Reproduction Version

1.9.1

Relevant Info

Edge (117), Chrome (116), Firefox (118)

Regression?

-

Priority impact

p3 - want for upcoming milestone

Impact

Missing components results in debugging activities where a 'save' of a certain file would suffice, but it's not always clear which file

Calcite package

Esri team

Professional Services - Services Delivery

DitwanP commented 10 months ago

@arjanvanzutphen There was a duplicate of this issue created that has reproduction instructions that shows the cause of this behavior. #8143

It looks like you have to make sure to import components from @esri/calcite-components in addition to the react wrappers like the sample on that issue does to mitigate this issue.