fix: multiple hash loader with different color renders as the same co…

…lor (#602)

* fix-hash

* fix

* fix

* fix

* fix

* fix

.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

.gitignore

@@ -18,4 +18,5 @@ umd
 .yarn/cache
 .yarn/install-state.gz
 stories/*.tsx
-storybook-static
+storybook-static
+coverage

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/);
   });
 });

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/);
   });
 });

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;
+}