Load loading indicator from file instead of inlining

[philippjfr]

The loading indicators displayed on top of components were thus far always inlined as a stylesheet on each component. This is tremendously inefficient and also unnecessary to a certain extent. This change will load the SVG files either from CDN or from the local /static endpoint like all other other CSS assets. The trick we are using here is to use a CSS -image-mask and then set the background-color using an inlined stylesheet. This does mean we can no longer set a separate low opacity gray background to indicate that the component is temporarily disabled or unresponsive.

I'm still playing with alternative approaches but my basic idea is to use a CSS filter, starting with a blur filter.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (7f25eb1) 84.67% compared to head (2739db9) 84.66%.
Report is 1 commits behind head on main.

❗ Current head 2739db9 differs from pull request most recent head 1773a45. Consider uploading reports for the commit 1773a45 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6112      +/-   ##
==========================================
- Coverage   84.67%   84.66%   -0.01%     
==========================================
  Files         296      296              
  Lines       44100    44096       -4     
==========================================
- Hits        37341    37335       -6     
- Misses       6759     6761       +2     

Flag	Coverage Δ
ui-tests	40.68% <0.00%> (-0.01%)	⬇️
unitexamples-tests	72.67% <100.00%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.