From d5d85a7e7ae5ef18694d80d1c545a545fc2c42c6 Mon Sep 17 00:00:00 2001
From: AuDevTist1C <114492072+AuDevTist1C@users.noreply.github.com>
Date: Tue, 18 Aug 2026 15:33:41 +0200
Subject: [PATCH] refactor(loader): Extract `tailSpin` SVG component

Extract the SVG generator logic for the `tailSpin` loader into a dedicated, reusable component.

Create `tailSpin` component (`src/components/tailSpin.js`):
- Export `createTailSpinSvg` helper function
- Generate unique gradient IDs dynamically to prevent SVG gradient collisions across multiple loader instances
- Explicitly set function `name` property on exported SVG creator

Refactor loader dialog (`src/dialogs/loader.js`):
- Import `createTailSpinSvg` from component path
- Remove redundant local `createTailSpinSvg` implementation and SVG gradient tracking logic

(AI generated commit message)
---
 src/components/tailSpin.js | 15 +++++++++++++++
 src/dialogs/loader.js      |  9 +--------
 2 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 src/components/tailSpin.js

diff --git a/src/components/tailSpin.js b/src/components/tailSpin.js
new file mode 100644
index 000000000..157339e4f
--- /dev/null
+++ b/src/components/tailSpin.js
@@ -0,0 +1,15 @@
+import tailSpinSvg from "res/tail-spin.svg?raw";
+
+const tailSpinGradientId = "tail-spin-gradient";
+let tailSpinSvgId = 0;
+
+const createTailSpinSvg = () => {
+	const gradientId = `${tailSpinGradientId}-${tailSpinSvgId++}`;
+	return tailSpinSvg.replaceAll(tailSpinGradientId, gradientId);
+};
+
+Object.defineProperty(createTailSpinSvg, "name", {
+	value: "createTailSpinSvg",
+});
+
+export default createTailSpinSvg;
diff --git a/src/dialogs/loader.js b/src/dialogs/loader.js
index 133b982bd..e7a34cea4 100644
--- a/src/dialogs/loader.js
+++ b/src/dialogs/loader.js
@@ -1,21 +1,14 @@
+import createTailSpinSvg from "components/tailSpin.js";
 import DOMPurify from "dompurify";
 import Ref from "html-tag-js/ref";
 import actionStack from "lib/actionStack";
 import restoreTheme from "lib/restoreTheme";
-import tailSpinSvg from "res/tail-spin.svg?raw";
 
 let loaderIsImmortal = false;
 let onCancelCallback = null;
 let $currentDialog = null;
 let $currentMask = null;
 const titleLoaderId = "__title-loader";
-const tailSpinGradientId = "tail-spin-gradient";
-let tailSpinSvgId = 0;
-
-function createTailSpinSvg() {
-	const gradientId = `${tailSpinGradientId}-${tailSpinSvgId++}`;
-	return tailSpinSvg.split(tailSpinGradientId).join(gradientId);
-}
 
 /**
  * @typedef {object} LoaderOptions