animation: Use new spinner content

Change the dedicated Spinner widget to use the corresponding content
instead of subclassing AnimatedIcon with appropriate assets.

Other than the changed class hierarchy, the public API stays the
same, so the impact on callers should be minimal.

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/8055
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3565>

data/gnome-shell-theme.gresource.xml

@@ -8,8 +8,6 @@
     <file>gnome-shell-high-contrast.css</file>
     <file>gnome-shell-start.svg</file>
     <file>pad-osd.css</file>
-    <file>process-working-light.svg</file>
-    <file>process-working-dark.svg</file>
     <file>workspace-placeholder.svg</file>
   </gresource>
 </gresources>

js/ui/animation.js

@@ -1,7 +1,6 @@
 import Clutter from 'gi://Clutter';
 import GLib from 'gi://GLib';
 import GObject from 'gi://GObject';
-import Gio from 'gi://Gio';
 import St from 'gi://St';
 
 import * as Params from '../misc/params.js';
@@ -130,48 +129,29 @@ class AnimatedIcon extends Animation {
 });
 
 export const Spinner = GObject.registerClass(
-class Spinner extends AnimatedIcon {
-    _init(size, params) {
+class Spinner extends St.Widget {
+    constructor(size, params) {
         params = Params.parse(params, {
             animate: false,
             hideOnStop: false,
         });
-        this._fileDark = Gio.File.new_for_uri(
-            'resource:///org/gnome/shell/theme/process-working-dark.svg');
-        this._fileLight = Gio.File.new_for_uri(
-            'resource:///org/gnome/shell/theme/process-working-light.svg');
-        super._init(this._fileDark, size);
-
-        this.connect('style-changed', () => {
-            const themeNode = this.get_theme_node();
-            const textColor = themeNode.get_foreground_color();
-            const [, , luminance] = textColor.to_hsl();
-            const file = luminance > 0.5
-                ? this._fileDark
-                : this._fileLight;
-            if (file !== this._file) {
-                this._file = file;
-                this._loadFile();
-            }
+        super({
+            width: size,
+            height: size,
+            opacity: 0,
         });
 
-        this.opacity = 0;
         this._animate = params.animate;
         this._hideOnStop = params.hideOnStop;
         this.visible = !this._hideOnStop;
     }
 
-    _onDestroy() {
-        this._animate = false;
-        super._onDestroy();
-    }
-
     play() {
         this.remove_all_transitions();
+        this.set_content(new St.SpinnerContent());
         this.show();
 
         if (this._animate) {
-            super.play();
             this.ease({
                 opacity: 255,
                 delay: SPINNER_ANIMATION_DELAY,
@@ -180,7 +160,6 @@ class Spinner extends AnimatedIcon {
             });
         } else {
             this.opacity = 255;
-            super.play();
         }
     }
 
@@ -193,14 +172,14 @@ class Spinner extends AnimatedIcon {
                 duration: SPINNER_ANIMATION_TIME,
                 mode: Clutter.AnimationMode.LINEAR,
                 onComplete: () => {
-                    super.stop();
+                    this.set_content(null);
                     if (this._hideOnStop)
                         this.hide();
                 },
             });
         } else {
             this.opacity = 0;
-            super.stop();
+            this.set_content(null);
 
             if (this._hideOnStop)
                 this.hide();