refactor(loader): simplify loader part rendering (#9728)

**Related Issue:** N/A ## Summary Consolidates loader part rendering.
Esri · Jul 30, 2024 · 932d286 · 932d286
1 parent ba72161
commit 932d286
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git 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.loaderPartId(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
@@ -0,0 +1,8 @@
+export const CSS = {
+  loader: "loader",
+  loaderParts: "loader__svgs",
+  loaderPart: "loader__svg",
+  loaderPartId: (partId: number) => `${CSS.loaderPart}--${partId}` as const,
+  loaderText: "loader__text",
+  loaderPercentage: "loader__percentage",
+};