From e630ddae19d6f34b8ef927b688792024bdbb593c Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Tue, 17 Mar 2026 08:07:03 +0200
Subject: [PATCH] fix(spinner): fixed rendering on safari and firefox #360

---
 tedi/components/loader/spinner/spinner.component.html | 1 +
 tedi/components/loader/spinner/spinner.component.scss | 8 ++++----
 tedi/components/loader/spinner/spinner.component.ts   | 9 +++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/tedi/components/loader/spinner/spinner.component.html b/tedi/components/loader/spinner/spinner.component.html
index 8b01f0fa6..81496bb26 100644
--- a/tedi/components/loader/spinner/spinner.component.html
+++ b/tedi/components/loader/spinner/spinner.component.html
@@ -3,6 +3,7 @@
     class="tedi-spinner--inner"
     cx="22"
     cy="22"
+    [attr.r]="r()"
     fill="none"
   ></circle>
 </svg>
\ No newline at end of file
diff --git a/tedi/components/loader/spinner/spinner.component.scss b/tedi/components/loader/spinner/spinner.component.scss
index 1ec941d31..6d9e5d305 100644
--- a/tedi/components/loader/spinner/spinner.component.scss
+++ b/tedi/components/loader/spinner/spinner.component.scss
@@ -16,9 +16,7 @@ $spinner-sizes: (
   animation: 1.4s linear 0s infinite normal none running tedi-spinner-outer;
 
   &--inner {
-    // Convert stroke size in px to viewBox units: stroke px × (viewbox / size px)
-    stroke-width: calc(var(--tedi-spinner-stroke, 2) * #{$spinner-viewbox} / var(--tedi-spinner-size, 16));
-    r: calc(#{$spinner-viewbox / 2} - var(--tedi-spinner-stroke, 2) * #{$spinner-viewbox} / var(--tedi-spinner-size, 16) / 2);
+    stroke-width: var(--tedi-spinner-stroke-width);
     stroke-dasharray: 80, 200;
     stroke-dashoffset: 0;
     animation: 1.4s ease-in-out 0s infinite normal none running tedi-spinner-inner;
@@ -35,9 +33,11 @@ $spinner-sizes: (
   }
 
   @each $size, $stroke in $spinner-sizes {
+    $stroke-width: $stroke * $spinner-viewbox / $size;
+
     &--size-#{$size} {
       --tedi-spinner-size: #{$size};
-      --tedi-spinner-stroke: #{$stroke};
+      --tedi-spinner-stroke-width: #{$stroke-width};
     }
   }
 
diff --git a/tedi/components/loader/spinner/spinner.component.ts b/tedi/components/loader/spinner/spinner.component.ts
index 264a519fa..06a9fd846 100644
--- a/tedi/components/loader/spinner/spinner.component.ts
+++ b/tedi/components/loader/spinner/spinner.component.ts
@@ -41,6 +41,15 @@ export class SpinnerComponent {
    */
   label = input<string>();
 
+  private readonly sizeConfig: Record<SpinnerSize, { strokeWidth: number; r: number }> = {
+    10: { strokeWidth: 4.4, r: 19.8 },
+    16: { strokeWidth: 5.5, r: 19.25 },
+    48: { strokeWidth: 3.6667, r: 20.1667 },
+  };
+
+  strokeWidth = computed(() => this.sizeConfig[this.size()].strokeWidth);
+  r = computed(() => this.sizeConfig[this.size()].r);
+
   classes = computed(() => {
     const classList = [
       "tedi-spinner",