From 83af4effe4ccb688d65449abb3f55efb23662c16 Mon Sep 17 00:00:00 2001
From: Ajit Kumar <dellevenjack@gmail>
Date: Wed, 24 Jun 2026 20:00:38 +0530
Subject: [PATCH] fix: Use inline themed SVG for loader spinner

Import tail-spin.svg as raw SVG markup and render it through the loader DOM instead of using the circular border/background spinner. Update the SVG to inherit currentColor, expand its viewBox to avoid edge clipping, and style the dialog spinner with the app primary theme color.

Add ?raw SVG handling to both Rspack and Webpack so inline SVG imports do not conflict with normal asset/resource SVG usage. Also removes the old theme-side tail-spin recoloring path now that the spinner color is driven by CSS.
---
 rspack.config.js             |  6 ++++++
 src/cm/themes/noctisLilac.js |  2 +-
 src/dialogs/loader.js        |  3 ++-
 src/dialogs/style.scss       | 15 ++++++++++++---
 src/res/tail-spin.svg        | 10 +++++-----
 src/theme/list.js            | 25 ++++---------------------
 webpack.config.js            | 30 ++++++++++++++++++------------
 7 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/rspack.config.js b/rspack.config.js
index 9bb41530b..4cf1ebf9a 100644
--- a/rspack.config.js
+++ b/rspack.config.js
@@ -89,9 +89,15 @@ module.exports = (env, options) => {
       ],
       type: 'javascript/auto',
     },
+    {
+      test: /\.svg$/,
+      resourceQuery: /raw/,
+      type: 'asset/source',
+    },
     // Asset files
     {
       test: /\.(png|svg|jpg|jpeg|ico|ttf|webp|eot|woff|webm|mp4|wav)(\?.*)?$/,
+      resourceQuery: { not: [/raw/] },
       type: 'asset/resource',
     },
     // Regular CSS/SCSS files
diff --git a/src/cm/themes/noctisLilac.js b/src/cm/themes/noctisLilac.js
index c8665b661..c32479274 100644
--- a/src/cm/themes/noctisLilac.js
+++ b/src/cm/themes/noctisLilac.js
@@ -11,7 +11,7 @@ export const config = {
 	cursor: "#5c49e9",
 	dropdownBackground: "#f2f1f8",
 	dropdownBorder: "#e1def3",
-	activeLine: "#e1def3",
+	activeLine: "#e1def355",
 	lineNumber: "#0c006b70",
 	lineNumberActive: "#0c006b",
 	matchingBracket: "#d5d1f2",
diff --git a/src/dialogs/loader.js b/src/dialogs/loader.js
index 0c69daf4f..7ada9e5f5 100644
--- a/src/dialogs/loader.js
+++ b/src/dialogs/loader.js
@@ -2,6 +2,7 @@ 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;
@@ -51,7 +52,7 @@ function create(titleText, message = "", options = {}) {
 				{titleText}
 			</strong>
 			<span className="message loader">
-				<span className="loader"></span>
+				<span className="loader" innerHTML={tailSpinSvg}></span>
 				<div
 					ref={$message}
 					className="message"
diff --git a/src/dialogs/style.scss b/src/dialogs/style.scss
index a91908105..2db23f2bb 100644
--- a/src/dialogs/style.scss
+++ b/src/dialogs/style.scss
@@ -1,5 +1,3 @@
-@use "../styles/mixins.scss";
-
 .prompt {
   position: fixed;
   left: 50%;
@@ -285,8 +283,19 @@
       align-items: center;
 
       .loader {
-        @include mixins.circular-loader(30px);
+        width: 30px;
+        height: 30px;
+        color: rgb(153, 153, 255);
+        color: var(--primary-color);
+        display: flex;
+        flex-shrink: 0;
         margin: 0 10px;
+
+        svg {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
       }
 
       .message {
diff --git a/src/res/tail-spin.svg b/src/res/tail-spin.svg
index a12f0f4b9..20fb0e578 100644
--- a/src/res/tail-spin.svg
+++ b/src/res/tail-spin.svg
@@ -1,10 +1,10 @@
 <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+<svg width="38" height="38" viewBox="-1 -1 40 40" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-            <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
-            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
-            <stop stop-color="#fff" offset="100%"/>
+            <stop stop-color="currentColor" stop-opacity="0" offset="0%"/>
+            <stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="currentColor" offset="100%"/>
         </linearGradient>
     </defs>
     <g fill="none" fill-rule="evenodd">
@@ -18,7 +18,7 @@
                     dur="0.9s"
                     repeatCount="indefinite" />
             </path>
-            <circle fill="#fff" cx="36" cy="18" r="1">
+            <circle fill="currentColor" cx="36" cy="18" r="1">
                 <animateTransform
                     attributeName="transform"
                     type="rotate"
diff --git a/src/theme/list.js b/src/theme/list.js
index 1b53ee3ba..5d52cfccd 100644
--- a/src/theme/list.js
+++ b/src/theme/list.js
@@ -1,10 +1,8 @@
-import fsOperation from "fileSystem";
+import fonts from "lib/fonts";
+import settings from "lib/settings";
 import { isDeviceDarkTheme } from "lib/systemConfiguration";
+import { updateActiveTerminals } from "settings/terminalSettings";
 import color from "utils/color";
-import Url from "utils/Url";
-import fonts from "../lib/fonts";
-import settings from "../lib/settings";
-import { updateActiveTerminals } from "../settings/terminalSettings";
 import ThemeBuilder from "./builder";
 import themes, { updateSystemTheme } from "./preInstalled";
 
@@ -86,9 +84,6 @@ export async function apply(id, init) {
 	}
 
 	themeApplied = true;
-	const loaderFile = Url.join(ASSETS_DIRECTORY, "res/tail-spin.svg");
-	const svgName = "__tail-spin__.svg";
-	const img = Url.join(DATA_STORAGE, svgName);
 	const theme = get(id);
 	const $style = document.head.get("style#app-theme") ?? (
 		<style id="app-theme"></style>
@@ -127,6 +122,7 @@ export async function apply(id, init) {
 			updateActiveTerminals("theme", theme.preferredTerminalTheme);
 		}
 	}
+
 	localStorage.__primary_color = theme.primaryColor;
 	document.body.setAttribute("theme-type", theme.type);
 	$style.textContent = theme.css;
@@ -144,19 +140,6 @@ export async function apply(id, init) {
 		}, 1000);
 		firstTime = false;
 	}
-
-	try {
-		let fs = fsOperation(loaderFile);
-		const svg = await fs.readFile("utf8");
-
-		fs = fsOperation(img);
-		if (!(await fs.exists())) {
-			await fsOperation(DATA_STORAGE).createFile(svgName);
-		}
-		await fs.writeFile(svg.replace(/#fff/g, theme.primaryColor));
-	} catch (error) {
-		window.log("error", error);
-	}
 }
 
 /**
diff --git a/webpack.config.js b/webpack.config.js
index a87528b11..8767eaa8f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -30,18 +30,24 @@ module.exports = (env, options) => {
       test: /\.(hbs|md)$/,
       use: ['raw-loader'],
     },
-    {
-      test: /\.m.(sa|sc|c)ss$/,
-      use: [
-        'raw-loader',
-        'postcss-loader',
-        'sass-loader',
-      ],
-    },
-    {
-      test: /\.(png|svg|jpg|jpeg|ico|ttf|webp|eot|woff|webm|mp4|webp|wav)(\?.*)?$/,
-      type: "asset/resource",
-    },
+    {
+      test: /\.m.(sa|sc|c)ss$/,
+      use: [
+        'raw-loader',
+        'postcss-loader',
+        'sass-loader',
+      ],
+    },
+    {
+      test: /\.svg$/,
+      resourceQuery: /raw/,
+      type: 'asset/source',
+    },
+    {
+      test: /\.(png|svg|jpg|jpeg|ico|ttf|webp|eot|woff|webm|mp4|webp|wav)(\?.*)?$/,
+      resourceQuery: { not: [/raw/] },
+      type: "asset/resource",
+    },
     {
       test: /(?<!\.m)\.(sa|sc|c)ss$/,
       use: [