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

[arjanvanzutphen]

Check existing issues

• I have checked for existing issues to avoid duplicates

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):

After (behavior after saving the App.jsx in VS Code:

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/calcite-components
• @esri/calcite-components-react
• @esri/eslint-plugin-calcite-components

Esri team

Professional Services - Services Delivery

[DitwanP]

@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.