refactor(loader): Extract tailSpin SVG component and dynamic gradient logic

[AuDevTist1C]

This pull request refactors the tailSpin loader logic by extracting the SVG component creation and dynamic gradient ID generation out of src/dialogs/loader.js and into a dedicated component file src/components/tailSpin.js.

Motivation & Context

Previously, src/dialogs/loader.js directly imported raw SVG assets and maintained local state variables for tracking unique gradient IDs across loader instances. This design violated the Single Responsibility Principle by mixing asset preparation and dynamic string manipulation with high-level dialog lifecycle management.

By decoupling this logic, we encapsulate SVG generation into a standalone module. This improves code organization, reduces clutter in loader.js, and allows tailSpin to be cleanly imported and reused elsewhere in the project if needed without duplicating asset configuration or ID incrementation logic.

Detailed Changes

src/components/tailSpin.js (New Component)

• Module Encapsulation: Created a dedicated component module for generating tailSpin SVG markup.
• Asset Handling: Moved the raw SVG resource import (res/tail-spin.svg?raw) into this standalone file.
• Dynamic Gradient IDs: Retained module-scoped state (tailSpinSvgId) and base key (tailSpinGradientId) to ensure every generated SVG instance receives a unique gradient ID (e.g., tail-spin-gradient-0, tail-spin-gradient-1). This prevents SVG rendering issues caused by duplicate ID collisions in the DOM when multiple spinners are present.
• String Manipulation Refactor: Modernized the replacement logic by adopting String.prototype.replaceAll(), replacing the older .split().join() pattern.
• Explicit Function Metadata: Added Object.defineProperty to explicitly set the name property on createTailSpinSvg, ensuring consistent stack tracing and debugging introspection.
• Default Export: Exported createTailSpinSvg as the module's default export.

src/dialogs/loader.js

• Cleaned Up Dependencies: Removed redundant local implementations of createTailSpinSvg, raw SVG import statements, and local gradient tracking variables (tailSpinGradientId, tailSpinSvgId).
• Import Component: Updated the loader module to import createTailSpinSvg directly from components/tailSpin.js.

Technical Benefits

1. Separation of Concerns: Dialog controllers focus purely on dialog state and behavior, delegating asset creation to UI component helpers.
2. Reusability: The tailSpin SVG creator can now be reused by any other component or dialog in Acode without importing dialog-specific overhead.
3. Cleaner Syntax: Replaced legacy string splitting techniques with native replaceAll for improved readability and code clarity.

_{(PR name and description are AI generated (Gemini 3.6 Flash))}

[greptile-apps]

Greptile Summary

The PR extracts tail-spin SVG generation and its unique gradient-ID state from the loader dialog into a reusable component.

• Adds src/components/tailSpin.js to own raw SVG loading and per-instance gradient substitution.
• Updates src/dialogs/loader.js to consume the extracted helper while preserving existing loader behavior.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
src/components/tailSpin.js	Encapsulates tail-spin SVG generation with module-scoped unique gradient IDs; no eligible follow-up defect was established.
src/dialogs/loader.js	Replaces the local SVG helper with the extracted component import without changing dialog lifecycle behavior.

_{Reviews (2): Last reviewed commit: "refactor(loader): Extract `tailSpin` SVG..." | Re-trigger Greptile}