From ae4a2c5b2ddb17fa7a88f3edb890f9509062ba17 Mon Sep 17 00:00:00 2001
From: David Hu <davidhu314@gmail.com>
Date: Tue, 25 Jun 2024 22:01:47 -0700
Subject: [PATCH] fix: multiple hash loader with different color renders as the
 same color (#602)

* fix-hash

* fix

* fix

* fix

* fix

* fix
---
 .github/workflows/deploy.yml         |  4 ++++
 .gitignore                           |  3 ++-
 src/helpers/animation.server.test.ts |  2 +-
 src/helpers/animation.test.ts        |  2 +-
 src/helpers/animation.ts             | 14 +++++++++++++-
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 2bb62185..9deba1f6 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -6,6 +6,10 @@ on:
   pull_request:
     branches: [main]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
   pages: write
diff --git a/.gitignore b/.gitignore
index c4ef7626..7b05cb58 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,5 @@ umd
 .yarn/cache
 .yarn/install-state.gz
 stories/*.tsx
-storybook-static
\ No newline at end of file
+storybook-static
+coverage
\ No newline at end of file
diff --git a/src/helpers/animation.server.test.ts b/src/helpers/animation.server.test.ts
index 7e8bf233..2a7010ed 100644
--- a/src/helpers/animation.server.test.ts
+++ b/src/helpers/animation.server.test.ts
@@ -11,6 +11,6 @@ describe("animation", () => {
       "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}",
       "my-suffix"
     );
-    expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+    expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
   });
 });
diff --git a/src/helpers/animation.test.ts b/src/helpers/animation.test.ts
index 4067872f..0e002f0f 100644
--- a/src/helpers/animation.test.ts
+++ b/src/helpers/animation.test.ts
@@ -7,6 +7,6 @@ describe("createAnimation", () => {
       "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}",
       "my-suffix"
     );
-    expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+    expect(name).toMatch(/^react-spinners-TestLoader-my-suffix/);
   });
 });
diff --git a/src/helpers/animation.ts b/src/helpers/animation.ts
index fa2a5d93..2069f5a4 100644
--- a/src/helpers/animation.ts
+++ b/src/helpers/animation.ts
@@ -1,5 +1,5 @@
 export const createAnimation = (loaderName: string, frames: string, suffix: string): string => {
-  const animationName = `react-spinners-${loaderName}-${suffix}`;
+  const animationName = `react-spinners-${loaderName}-${suffix}-${animationSuffix(10)}`;
 
   if (typeof window == "undefined" || !window.document) {
     return animationName;
@@ -21,3 +21,15 @@ export const createAnimation = (loaderName: string, frames: string, suffix: stri
 
   return animationName;
 };
+
+function animationSuffix(length: number) {
+  let result = "";
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return result;
+}