From 950d9c9c6391f5cc72407169fa94d3dce3b0537f Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 2 Jul 2024 19:02:14 -0700
Subject: [PATCH 1/3] refactor(loader): simplify loader part rendering

---
 .../src/components/loader/loader.tsx          | 35 ++++++++++---------
 .../src/components/loader/resources.ts        |  7 ++++
 2 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 packages/calcite-components/src/components/loader/resources.ts

diff --git a/packages/calcite-components/src/components/loader/loader.tsx b/packages/calcite-components/src/components/loader/loader.tsx
index 7d866055a58..d22b3049bdf 100644
--- a/packages/calcite-components/src/components/loader/loader.tsx
+++ b/packages/calcite-components/src/components/loader/loader.tsx
@@ -1,6 +1,7 @@
 import { Component, Element, h, Host, Prop, VNode } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { Scale } from "../interfaces";
+import { CSS } from "../resources";
 
 @Component({
   tag: "calcite-loader",
@@ -71,24 +72,24 @@ export class Loader {
         role="progressbar"
         {...(isDeterminate ? hostAttributes : {})}
       >
-        <div class="loader__svgs">
-          <svg aria-hidden="true" class="loader__svg loader__svg--1" viewBox={viewbox}>
-            <circle {...svgAttributes} />
-          </svg>
-          <svg aria-hidden="true" class="loader__svg loader__svg--2" viewBox={viewbox}>
-            <circle {...svgAttributes} />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="loader__svg loader__svg--3"
-            viewBox={viewbox}
-            {...(isDeterminate ? { style: determinateStyle } : {})}
-          >
-            <circle {...svgAttributes} />
-          </svg>
+        <div class={CSS.loaderParts}>
+          {[1, 2, 3].map((index) => (
+            <svg
+              aria-hidden="true"
+              class={{
+                [CSS.loaderPart()]: true,
+                [CSS.loaderPart(index)]: true,
+              }}
+              key={index}
+              viewBox={viewbox}
+              {...(index === 3 && isDeterminate ? { style: determinateStyle } : {})}
+            >
+              <circle {...svgAttributes} />
+            </svg>
+          ))}
         </div>
-        {text && <div class="loader__text">{text}</div>}
-        {isDeterminate && <div class="loader__percentage">{value}</div>}
+        {text && <div class={CSS.loaderText}>{text}</div>}
+        {isDeterminate && <div class={CSS.loaderPercentage}>{value}</div>}
       </Host>
     );
   }
diff --git a/packages/calcite-components/src/components/loader/resources.ts b/packages/calcite-components/src/components/loader/resources.ts
new file mode 100644
index 00000000000..a29f5aa44eb
--- /dev/null
+++ b/packages/calcite-components/src/components/loader/resources.ts
@@ -0,0 +1,7 @@
+export const CSS = {
+  loader: "loader",
+  loaderParts: "loader__svg",
+  loaderPart: (partId?: number) => (partId ? `loader__svg--${partId}` : "loader__svg") as const,
+  loaderText: "loader__text",
+  loaderPercentage: "loader__percentage",
+};

From 90cd1a28840c58832d4dca135cf697c1772c0c3b Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 2 Jul 2024 19:03:50 -0700
Subject: [PATCH 2/3] fix class name

---
 packages/calcite-components/src/components/loader/resources.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/loader/resources.ts b/packages/calcite-components/src/components/loader/resources.ts
index a29f5aa44eb..ca21d01f5fe 100644
--- a/packages/calcite-components/src/components/loader/resources.ts
+++ b/packages/calcite-components/src/components/loader/resources.ts
@@ -1,6 +1,6 @@
 export const CSS = {
   loader: "loader",
-  loaderParts: "loader__svg",
+  loaderParts: "loader__svgs",
   loaderPart: (partId?: number) => (partId ? `loader__svg--${partId}` : "loader__svg") as const,
   loaderText: "loader__text",
   loaderPercentage: "loader__percentage",

From 68c8f0ccc4f634b67e9021894036bb7f35ca87bd Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 2 Jul 2024 19:09:16 -0700
Subject: [PATCH 3/3] tidy up

---
 .../calcite-components/src/components/loader/loader.tsx     | 6 +++---
 .../calcite-components/src/components/loader/resources.ts   | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/loader/loader.tsx b/packages/calcite-components/src/components/loader/loader.tsx
index d22b3049bdf..77d88b147ae 100644
--- a/packages/calcite-components/src/components/loader/loader.tsx
+++ b/packages/calcite-components/src/components/loader/loader.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, h, Host, Prop, VNode } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { Scale } from "../interfaces";
-import { CSS } from "../resources";
+import { CSS } from "./resources";
 
 @Component({
   tag: "calcite-loader",
@@ -77,8 +77,8 @@ export class Loader {
             <svg
               aria-hidden="true"
               class={{
-                [CSS.loaderPart()]: true,
-                [CSS.loaderPart(index)]: true,
+                [CSS.loaderPart]: true,
+                [CSS.loaderPartId(index)]: true,
               }}
               key={index}
               viewBox={viewbox}
diff --git a/packages/calcite-components/src/components/loader/resources.ts b/packages/calcite-components/src/components/loader/resources.ts
index ca21d01f5fe..94b8c47585f 100644
--- a/packages/calcite-components/src/components/loader/resources.ts
+++ b/packages/calcite-components/src/components/loader/resources.ts
@@ -1,7 +1,8 @@
 export const CSS = {
   loader: "loader",
   loaderParts: "loader__svgs",
-  loaderPart: (partId?: number) => (partId ? `loader__svg--${partId}` : "loader__svg") as const,
+  loaderPart: "loader__svg",
+  loaderPartId: (partId: number) => `${CSS.loaderPart}--${partId}` as const,
   loaderText: "loader__text",
   loaderPercentage: "loader__percentage",
 };