[budescode]

Replaces the circle spinner in dcc.Loading with a plain rotating ring, the most common loading indicator on the web. No new type value is added, as discussed below.

This started as a new clip type. Following review, the ring now replaces the SpinKit "circle of dots" implementation behind the existing circle name, so the number of built-in types stays at 5.

The ring is a port of ClipLoader from react-spinners (MIT), done the same way as the existing SpinKit ports: no new dependency, one self-contained file with inline CSS, and the source credited in a comment.

Note for users: any app using type="circle" will see the new spinner after upgrading. The old CSS class dash-sk-circle is replaced by dash-circle-spinner. This is recorded under Changed in the CHANGELOG.

Contributor Checklist

• I have broken down my PR scope into the following TODO tasks
  • Replace the circle spinner implementation in CircleSpinner.tsx
  • Update the renderer loading-state test selector to the new class name
  • Add integration test test_ldcp020_loading_component_circle_spinner
• I have run the tests locally and they passed. (refer to testing section in contributing)
• I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

optionals

• I have added entry in the CHANGELOG.md
• If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows
  • this GitHub #PR number updates the dash docs
  • here is the show and tell thread in Plotly Dash community

[camdecoster]

Thanks for the PR! Our team will review and follow up.

[budescode]

CI failed on test_dvcv009_suppress_callback_exceptions, which looks flaky and unrelated to this change. Could someone re-run it? Thanks!

@KoolADE85 @camdecoster

[budescode]

The benchmark job fails at the "Comment results on the PR" step (403, read-only token on a fork PR). Looks like #3984 fixes that. Once it is merged, could you re-run the benchmarks here so the results get posted?

@KoolADE85

[KoolADE85]

Hey @budescode thanks for the submission here!
I like the standard-looking circle spinner here, but I'm a bit skeptical of adding new spinner types.
What do you think about updating the existing circle spinner to just be this improved implementation instead? That way we replace the existing "circle of dots" and keep a manageable number of types.

[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 SonarQube Cloud

[budescode]

Thanks @KoolADE85, that works for me. I have updated the PR to replace the current circle implementation with this ring and dropped the clip type, so the number of built-in types stays at 5.

One note: this is a visible change for any app already using type="circle", and the CSS class changes from dash-sk-circle to dash-circle-spinner. I have listed it under Changed in the CHANGELOG. Let me know if you would prefer it handled differently.

[AnnMarieW]

I'm wondering if this might be considered a breaking change. The 5 built-in spinners all have a similar style and this update will change one of them.

I think it would be best not to update the spinners. It's easy to add your own spinner if you don't like the built-in options using the custom_spinner prop. See example in the docs:

https://dash.plotly.com/dash-core-components/loading#custom-spinner-component